深入浅出CSS（针对后端攻城狮）
目录
什么是CSS：
CSS的注释：
在HTML页面中嵌套使用CSS的三种方式：
第一种方式（内联定义方式）：
第二种方式（定义内部样式块对象）：
第三种方式（链入外部样式表文件）：
CSS样式的绝对定位：
注意：
什么是CSS：
CSS，层叠样式表语言。用于修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
HTML还是主体，CSS依赖HTML，CSS的存在就是为了修饰HTML，所以新建的文件还是xx.html文件。
CSS的注释：
/* 注释 */
无 // 和 /* * * * */
在HTML页面中嵌套使用CSS的三种方式：
css在html文件中使用，使用方法有很多，但都可以达到同一个效果。
注：以下所描述的样式有一个汇总表格，可结合表格就行开发：
CSS2.0.chm，一生推！
第一种方式（内联定义方式）：
在普通标签内部使用style属性来设置元素的css样式，这种方式被称为内联定义方式。
语法格式：
<标签 style=" 样式名 : 样式值 ; 样式名 : 样式值 ; …… "></标签>示例：
<p style="margin-left : 0.5in ; margin-right : 0.5in">这一行被增加了左右的外补丁</p>
第二种方式（定义内部样式块对象）：
在<head>和</head>标记之间插入一个<style> …… </style>块对象。
语法格式：
<html><head><title>文档标题</title><style type="text/css"> <!--这里的type="text/css"是必须写的-->选择器{样式名 : 样式值;样式名 : 样式值;……}选择器{样式名 : 样式值;样式名 : 样式值;……}</style></head><body>......</body></html>
选择器：
1、id选择器：
语法格式：
#id{样式名 : 样式值;样式名 : 样式值;…… }如：
#username{}2、标签选择器：
语法格式：
标签名{样式名 : 样式值;样式名 : 样式值;…… }如：
input{样式名 : 样式值;样式名 : 样式值;…… }标签选择器的作用范围比id选择器广。（因为id不能重复，使用标签选择器只能作用在一个标签上）
3、类选择器：
语法格式：
.类名{ /* 注意类名前有一个点 */样式名 : 样式值;样式名 : 样式值;…… }在想共同设置一个样式的标签内设置class属性，类名一样则可以一起css样式。
如：
<input type=”text” class=”myclass”><select class=”myclass”><option>本科</option><option>研究生</option> </select>类名可以设置两个，这样两套样式同时作用在一个标签上，
如：
<input type="text" class="FirstClass SecondClass">。
第三种方式（链入外部样式表文件）：
这种方式最常用。将样式写到一个独立的xxx.css文件中，在需要的网页上之间引入css文件，样式就被引用了。
css文件中也是通过选择器来修改html文件的样式。
css文件里直接写代码即可：
选择器{样式名 : 样式值;样式名 : 样式值;…… }选择器{样式名 : 样式值;样式名 : 样式值;…… }语法格式：（在<head> </head>内添加）：
<link type="text" rel="stylesheet" href="css文件的路径"/>优点：耦合度低，易维护（一个css文件被多个html文件引用，有新需求只要修改一个文件即可），可复用。
CSS样式的绝对定位：
css中定位方式有很多，这里只介绍css样式的绝对定位。
先添加样式名position且设置为absolute。
如：
#div{position : absolute ;left : 100px ;top : 100px ; /*将div定位到离浏览器窗口顶部和左边都是100像素的位置*/
}注意：
1、布局样式中有一个叫display的样式名，可以设置对象的隐藏（none）、显示（block）等。
2、要善于查文档，如果先让边框为红色，在相继设置边框颜色和边框尺寸后都不显示，原因是边框的border-style样式默认none，即无边框。
3、设置鼠标样式的cursor样式名中，想设置鼠标为小手造型，最好用pointer，hand部分浏览器不兼容。
深入浅出CSS（针对后端攻城狮）相关推荐
- 深入浅出HTML（针对后端攻城狮）
目录 前言 一.系统结构: B/S架构: C/S架构: 二.什么是HTML? 三.HTML的基本语法: 三-1.HTML的基本代码结构: 三-2.HTML的基本标签: 三-3.表格: 三-3-1.表格 ...
- 【网易云信招聘啦】216位攻城狮，呼唤7个好基友
Hi,猿 过年了 年终奖拿了没 老板给加薪没 耿耿于怀的你 是否各种隐忍沮丧 以下代表,你属于哪一个? 猿A 公司是创业公司,还未盈利,为了产品上线,付出很多,能力提升了很多.不过,项目不赚钱,没人在 ...
- 一位Java开发攻城狮的自我修养之项目篇
攻城狮的自我修养之项目篇 基础知识 Java基础 SpingBoot SpringCloud LeetCode题库 大数据 项目实战 商城系统 权限管理系统 脚手架系统 人事管理系统 论坛系统 博客系 ...
- 【致敬未来的攻城狮计划】第1期 作业汇总贴 + 获奖公布
文章目录 一.写在前面 二.种子学员介绍 三.作业贴汇总 四.小小总结 五.获奖公布 六.学员有话说 七.特别致谢 一.写在前面 时间过得真快,距离 [致敬未来的攻城狮计划]第1期 的发起,已经过 ...
- python怎么把所有标点符号置空_Python从小白到攻城狮(1)——python环境搭建
我的微信公众号:代码视界,欢迎关注. Python介绍 Python是Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言,1991年发布第一版. Pyth ...
- Fiddler无所不能——之测试开发攻城狮必备神器
fiddler官网 https://www.progress.com/ 官网下载fiddler https://www.telerik.com/download/fiddler/fiddler4 f ...
- 微信小游戏的前端攻城狮玩法
转自自己在开源中国上的博客:https://my.oschina.net/u/7247... 前言 公司群里经常有人会发一些微信小游戏,每次下面都会跟好多晒分截图.比如这个<看你有多色>的 ...
- 挨踢部落故事汇(6):女攻城狮职位晋升记
热爱生活,更热爱代码.每天都是一个新的开始!相信自己肯定行. 难以想象一个跳入IT坑已经十余年的女攻城狮是如何潜心修炼的,然而文英就是一个活生生的例子,江湖人生代码神手的她,在工作上任劳任怨,不求回报 ...
- 活动报名 | 前端攻城狮该怎样跳脱“围城”的焦虑
活动报名 | 前端攻城狮该怎样跳脱"围城"的焦虑 原创: 京小云 京东云开发者社区 4天前 作为WEB2.0的产物,前端工程师这一相对较新的职业俨然变成了一颗?一样的存在--丰富 ...
最新文章
- 查询去除空值_SQL多表查询
- SpringBoot的修改操作
- 多种分布式文件系统简介
- 【全球年青人召集令】Hello World，Hello 2050
- 这是一位川大零基础转行 Python 的人生勇士
- 大话设计模式—工厂模式
- 双向a*搜索算法_双向搜索算法
- Java中对象的比较 == 和 equals()
- Python之网络编程（Socket）
- 为何要弃 Java、Swift 于不顾，而选择 Python？
- python遍历文件夹内文件并检索文件中的中文内容
- 排序（使用插入法对数组元素从小到大排序）
- 电视墙解码服务器不在线,超高清电视墙服务器
- 启动报错 Bean instantiation via factory method failed
- 往hive表中插入与导出数据方式load ,insert ,sqoop 等方式详解
- EAN13条形码绘制（Delphi版）
- 线路/信道编码技术(1)——8B/10B编码
- MySQL学习教程（超全）
- 学习OpenCV：海森矩阵（Hessian Matrix）
- 巴斯扩散模型-Bass Diffusion Model