目录
一、什么是CSS?
1.1、CSS的概念:Cascading Style Sheet 级联样式表;
1.2:、表现HTML或XHTHL文件样式的计算机语言
- 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位对那个设定
二CSS的发展史
三、CSS的优势
- 内容与表现分离
- 网页的表现统一,容易修改
- 丰富的样式,是的页面布局更加灵活
- 减少网页的代码量,增加网页的浏览熟读,节省网络宽带
- 运用独立于页面的CSS,有利于网页被搜索引擎收录
四、CSS的基本语法
4.1
选择器{
声明1;
声明2;
......}
经验:CSS的最后一条声明后的“;”可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束“;”都要写上;
4.2、Style标签
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
五、HTML中引入CSS样式
5.1
- 行内样式
行内样式使用style属性引入CSS样式
示例:<h1 style="color:red;">style属性的应用</h1> <p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
- 内部样式
内部样式表CSS代码写在<head>的<style>标签中
示例:<style>
h1{color: green; }
</style>
优点:方便在同页面中修改样式
缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底
- 外部样式
外部样式表链接外部样式表方式一
示例:<head> ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
外部样式表导入外部样式表方式二
示例:<head> ……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
5.2链接式与导入式的区别
- <link/>标签属于XHTML,@import是属于CSS2.1
- 使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示
- 使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当
- @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
5.3CSS样式优先级
- 行内元素>内部样式表>外部样式表
- 就近原则
六、CSS基本选择器
- 标签选择器
HTML标签作为标签选择器的名称
<h1>...<h6>、<p>、<img/>
语法:
p{font-size:16px;}
- 类选择器
语法:.class{font-size:16px;}
- ID选择器
语法:#id{font-size:16px;}
小结
- 标签选择器直接应用于HTML标签
- 类选择器可在页面中多次使用
- ID选择器在同一个页面中只能使用一次
七、CSS的高级选择器
- 层次选择器
选择器 | 类型 | 功能描述 |
E F | 后代选择器 | 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 |
E>F | 子选择器 | 选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素 |
E+F | 相邻兄弟选择器 | 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面 |
E_F | 通用兄弟选择器 | 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素 |
1.后代选择器语法: body p{background:red;}
注意:后代选择器两个选择符之间必须要以空格隔开,中间不能有任何其他的符号插入
2.子选择器语法:body>p{ background: pink; }
3.相邻兄弟选择器: .active+p { background: green; }
4.通用兄弟选择器: .active~p{ background: yellow; }
- 结构伪类选择器
选择器 | 功能描述 |
E:first-child | 作为父元素的第一个子元素的元素E |
E:last-child | 作为父元素的最有一个子元素的元素E |
E F:nth-child(n) | 选择父级元素E的第n个子元素F,(n可以是1、2、3),关键字为ven、odd |
E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
- 使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
- E F:nth-child(n)在父级里从一个元素开始查找,不分类型
- E F:nth-of-type(n)在父级里先看类型,再看位置
- 属性选择器
属性选择器 | 功能描述 |
E[attr] | 选择匹配具有属性attr的E元素 |
E[E[attr=val]] | 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写) |
E[attr^=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串 |
E[attr$=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串 |
E[attr*=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配 |
1、E[attr]属性选择器语法: a[id] { background: yellow; }
2、E[attr=val]属性选择器语法: a[id=first] { background: red; }
注意:E[attr=val]属性选择器中,属性和属性值必须完全匹配才能被选中
2、E[attr^=val]属性选择器语法: a[href^=http] { background: red; }
3、E[attr*=val]属性选择器语法: a[class*=links] { background: red; }
4、E[attr^=val]属性选择器语法: a[href^=http] { background: red; }
5、E[attr$=val]属性选择器语法:E[attr$=val]属性选择器