CSS:
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
CSS分类:
样式规则 : 样式属性名:值; 样式属性名:值;
样式属性名:值1 值2 值3;
一 :行内样式 :写在html标签内部,使用style属性 :(不推荐)
< style=“样式规则”>
二、 写在HTML的head部分 内嵌样式 :仅作用于当前页面
三、 外部样式文件 扩展为: XXX.css
注意:外部样式文件中仅写样式规则 ,不能写任何 HTML标签
在HTML页面中链接外部样式文件:<head>中<link type=\"text/css\" rel=\"stylesheet\" href=\"css/style-1.css\"/>
行内 > 内嵌 >外部
CSS语法:
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。选择器{ 属性名:值1 值2; 属性名:值;}
选择器分类:
一 :标签(html)选择器 -->默认样式规则标签名{样式规则}不用调用,直接作用在标签上
二、 类选择器(class选择器) :可以作用在多个不同类型的标签上
语法:.类名{样式规则}标签使用此样式,则在标签中写属性:< class=\"类名\" >注意事项:1 一个标签可以调用 多个类样式 : class=\"类1 类2 类3\"2 定义样式在后面优于前面3 类样式 优于标签样式
三 ID选择器:仅修饰单个标签 常用于修饰页面标签div
语法:
#ID名{样式规则}
标签使用此样式:< id=\"id名\" >
ID > 类 > 标签 > 默认样式
复合选择器:
一 分组选择器 --》多个选择器有相同样式时,可以使用分组选择器语法:选择器1,选择器2,选择器3{样式规则}
二 结合选择器 –》指定某类标签使用的类样式
语法
标签名.类名{样式规则}
三 后代选择器 ==》某元素后代的元素样式 所有后代
语法:
父选择器 子选择器{样式规则}
四 子元素选择器–仅包含子元素不包含孙元素
语法:
父选择器 > 子选择器{样式规则}
五 属性选择器 –》包含此属性的元素
六、 兄弟选择器 –》兄后面所有的弟选择器的样式
语法:
兄选择器 ~ 弟选择器{样式}
七 相邻兄弟选择器 – > 兄后面紧邻的弟选择器
语法:
兄选择器 + 弟选择器{样式}