CSS
- 说在前面
- 概念
- 语法 syntax
- CSS选择器
说在前面
最近挺喜欢看One Piece的,并且发现前端三剑客如果对应上Sanji,Zoro和Luffy的话会很有趣,所以说非常想在博客里面对应上小彩蛋,即使会损失一些SEO,但是这样做对我来说很酷,那么现在我们就开始学习CSS吧!
[ 本系列博客主要参考于w3school,是对其中详细教程的总结 ]
概念
CSS之前学习过程中给我的感觉是非常的美,样式可以做的非常酷,但是总体难度相对于HTML要难上许多,但是学习起来非常有意思
首先 CSS 是描述 HTML 文档样式的语言
- Cascading Style Sheets 层叠样式表/级联样式表
- 描述如何在屏幕、纸张或其他媒体上显示 HTML 元素(针对不同设备和屏幕尺寸的设计和布局)
- 节省大量工作,可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中
语法 syntax
CSS 规则集(rule-set)由选择器和声明块组成
选择器指向需要设置样式的 HTML 元素
声明块包含一条或多条用分号分隔的声明
每条声明都包含一个 CSS 属性名和一个属性值,以冒号分隔
多条 CSS 声明用分号分隔,声明块用花括号括起来
CSS选择器
CSS 选择器大致分为5类
- 简单选择器:名称,id,类
- 组合选择器:特定关系
- 伪类选择器:特定状态
- 伪元素选择器:选取元素部分并设置样式
- 属性选择器:属性or属性值
CSS 元素选择器
在 W3C 标准中,元素选择器又称为类型选择器 type selector
p {
text-align: center;
color: red;
}
CSS id 选择器
元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素
注意 id 名称不能以数字开头
#para1 {
text-align: center;
color: red;
}
CSS 类选择器
类选择器选择有特定 class 属性的 HTML 元素
.class {
text-align: center;
color: red;
}
注意类名不能以数字开头
组合
p.center {
text-align: center;
color
}
引用多个类
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">此标题不受影响</h1>
<p class="center">红色并居中对齐</p>
<p class="center large">红色并居中对齐并放大字体</p>
</body>
</html>
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background: silver;}
通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限,再包含其他类名也可)
通用选择器
universal selector
* {
text-align: center;
color:blue;
}
分组选择器
h1, h2, p {
text-align: center;
color: red;
}
通过分组,创作者可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表
声明分组
h1 {font: 28px Verdana; color: white; background: black;}
与选择器分组一样,声明分组也是一种便利的方法,可以缩短样式表,使之更清晰,也更易维护
提示:在规则的最后一个声明后也加上分号是一个好习惯
在向规则增加另一个声明时,就不必担心忘记再插入一个分号
结合选择器分组和声明分组
利用很少的语句即可定义复杂的样式
h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
[title] {color:red;}
a[href] {color:red;}
还可以根据多个属性进行选择,只需将属性选择器链接在一起即可
将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
a[href][title] {color: red;}
可以对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像
img[alt] {border: 5px solid red;}
上面这个特例更适合用来诊断而不是设计,即用来确定图像是否确实有效
除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
p[class="important warning"] {color: red;}
p[class~="important"] {color: red;}
如果忽略了波浪号,则说明需要完成完全值匹配
p.important 和 p[class="important"] 应用到 HTML 文档时是等价的
子串匹配属性选择器
[abc^="def"] 选择abc属性值以"def"开头的所有元素
[abc$="def"] 选择abc属性值以"def"结尾的所有元素
[abc*="def"] 选择abc属性值中包含子串"def"的所有元素
如:
a[*href="w3school.com.cn"] {color: red;}
后代选择器 descendant selector 又称为包含选择器
后代选择器可以选择作为某元素后代的元素
可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用
若希望只对 h1 元素中的 em 元素应用样式
h1 em {color: red;}
在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器
选择器之间的空格是一种结合符(combinator)
后代选择器的功能极其强大
可以使 HTML 中不可能实现的任务成为可能
div.sidebar {background: blue;}
div.maincontent {background: white;}
div.sidebar a:link {color: white;}
div.maincontent a:link {color: blue;}
a含有四种状态:
1. link: a对象在未被访问前的样式
2. visited: a对象访问过后的样式
3. hover: a对象当有鼠标悬停其上的样式
4. active: a对象点击时的样式
a:hover一定要定义在a:link,a:visited的后面
后代选择器中两个元素之间的层次间隔可以是无限的
子元素选择器 Child selectors只能选择子元素
h1 > strong {color: red;}
相邻兄弟选择器 Adjacent sibling selector 可以选择紧接在另一元素后的元素,且二者具有相同父元素
例如增加紧接在h1元素后出现的段落的上边距
h1 + p {margin-top: 50px;}
选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素
+ 是 相邻兄弟结合符 Adjacent sibling combinator
相邻兄弟结合符还可以结合其他结合符
html > body table + ul {margin-top: 20px}
选择紧接在table元素后面出现的所有兄弟ul元素,table元素包含在body元素中,body元素本身是html元素的子元素