.1 CSS的定义
CSS通常称为CSS样式表或层叠样式表,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等 外观显示样式。
CSS以HTML为基础,提供丰富的功能,如字体、颜色、背景的控制及整体排版,而且还可以针对不同的浏览器设置不同的样式。
CSS就是控制页面布局和样式
HTML和CSS的关系
HTML 结构层 负责从语义的角度搭建页面的结构。
CSS样式层 负责从审美的角度美化页面
JavaScript 行为层 负责从交互的角度提升用户体验。
1.2 引入CSS的方式
1.2.1 行内样式
行内样式,是通过在标签中设置style属性达到实现控制标签的样式的效果,style属性中,可以设置多条的CSS样式
1.2.2 内嵌样式
内嵌样式是在head标签中添加style标签,
1.2.3 外联样式
外联样式,通过link标签收入css样式文件
rel:指定当前HTML文件与CSS文件的关系是样式表。href:指定外联样式表的路径
2.CSS的注释:
•CSS的注释格式: /* 注释内容*/
可以同时注释多行语句比如:/* 注释内容
多行注释内容
多行注释内容 */
3.CSS选择器
•所有标签选择器 * {}
•标签选择器 p {}div {}
•ID选择器 #head {} #是ID选择器的标识,是当前页面中唯一值的标签。在一个页面中是唯一的值。
•类选择器 .head {} 是对HTML标签中的class属性进行选择,类选择器的选择符是 “.”标签可以包含多个类选择器,在class标签中用空格隔开
选择器和class选择器的区别
1、相同的Class属性值,可以在HTML中出现多次。ID属性值在页面中只能出现一次。
2、一个class的属性可以有多个值,也就是说一个标签可以有多个类
在确定当前页面呢只出现一次的用ID选择器,否则用类选择器。
3.1通配符选择器
通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
3.2 ID选择器的命名规范
3.3 复合选择器:标签指定式选择器
标签指定式复合选择器,要求必须是标签开头然后其他选择器。
比如:h3.demo {} ,需要同时满足既是标签h3又拥有demo类才能被选择到
3.4 后代选择器
后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。
3.5 并集选择器标签
语法:h1,h2,h3,{ color:red; }
3.6 子元素选择器
是让CSS选择器智能选择儿子辈的元素。
3.6 属性选择器:
使用的非常少 hi[ ]
3.7 伪类选择器
:link 伪类将应用于未被访问过的链接。IE6不兼容,解决此问题,直接使用a标签。
:visited伪类将应用于已经被访问过的链接
:hover 伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接,IE7+所有元素都兼容。
:active 伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。
:focus 伪类将应用于拥有键盘输入焦点的元素。
顺序问题:LoVeHAte原则。
3.8 伪元素选择器
伪元素 是控制内容
:first-line 伪元素
:first-letter 伪元素
注释:以上两个伪元素只能用于块级元素
:first-child 伪元素,选择属于第一个子元素的元素。
:before与:after伪元素,可以设置元素之前后之后的内容
4、CSS层叠性和继承性
4.1、层叠性 :所谓层叠性是指多种CSS样式的叠加。
4.2、继承性(子承父业):CSS的继承性是指,子容器的样式会继承父容器的样式。但并不是所有的样式都能继承。只有部分样式能继承,比如:文字相关字体大小、颜色、字体样式、行高、鼠标样式等。盒子相关的样式都不能继承,比如:宽高、背景色、边距、浮动、绝对定位等。
5 CSS的优先级: