一、CSS基础知识
1.1 CSS 选择器
名称 | 选择器例子 | 解释 |
---|---|---|
通配选择器 | * | |
标签(类型)选择器 | div | |
类选择器 | .hello | |
ID选择器 | #hello | |
多选择器 | p,div | p和div |
子元素选择器 | p > a | p标签内的直接子标签a |
后代选择器 | p a | p标签内的所有a标签 |
兄弟选择器 | p + a | p后面紧跟a标签,如果是p ~ a 则选择p同级所有a |
*
选择当前网页上的所有元素。
通配选择符也可以用于后代选择器等,比如div *
选择div中的所有元素。
类选择符有以下命名规则:
1、类选择符必须以点号开头;
2、类选择符的名称只能包含字母、数字、连字符、下划线;
3、点号之后,选择符的名称必须以字母开头;
4、类名区分大小写。
但它也有它的优点,它可以被JS用于定位元素。
比如 h1, p, .copyright #banner ....
,群选择器可以使用任何有效的选择符。
像p.intro
这样的选择器,看着像是后代选择器,但实际上不是,因为中间没有空格。
因此p.intro
会选择类为intro
的p
标签。
但如果是p .intro
则查找的是p
的后代.intro
元素。
链接伪类:
语法 | 描述 | 备注 |
---|---|---|
a:link | 访客尚未访问 | |
a:visited | 访客已访问 | |
a:hover | 鼠标悬浮 | 其它元素也可以用 |
a:active | 鼠标按下时 |
段落伪类:
::first-letter
:选中第一个字,可以设置为不同字体。
::first-line
:选中第一行,可以设置为不同颜色。
(注:css2的时候用的是一个冒号。)
其他伪类:
:focus
:聚集时
:before
:在指定元素前添加内容,比如.tip:before{ content: "okk" }
:after
:在指定元素后添加内容
::selection
:选中的内容,只能设置color和background-color
img[title]
:选择设置了title属性的img标签。
img[title="okk"]
:选择title属性为okk的img标签
a[href^="http://"]
:选择href属性以http://开头的a元素
a[fref$=".pdf"]
:选择href属性以.pdf结尾的a元素
first-child:
:选择第一个标签,比如h1:first-child
last-child:
:选择最后一个标签,比如h1:last-child
only-child:
:选择唯一子代,比如p:only-child
表示当某元素只有一个p元素的时候生效
nth-child(n):
:选择n某个
/* 选择tr的奇数行 */
tr:nth-child(odd)
/* 选择tr的偶数行 */
tr:nth-child(even)
/* 选择第五个 */
li:nth-child(5)
/* 每隔两个项目选择第三个项目 */
li-nth-child(3n)
/* 从第二个项开始每隔两个项目选择第三个项目 */
li-nth-child(3n+2)
/* n前面的倍数可以是负数,代表反向遍历 */
/* 从第三休项开始,选取前面的每个项 */
li-nth-child(-n+3)
/* 选取特定类型的第一个子代 */
:first-of-type
/* 选取.sidebar的第一个段落 */
.sidebar p:first-of-type
/* 选取特定类型的最后一个子代 */
:last-fo-type
/* 选取特定类型的第n个子代,和nth-child类似 */
:nth-of-type
:target
选择符:
当网页中有id属性的元素时,我们可以通过锚链接定位。
:target可以设置元素被定位时的特征。
:not()
选择符
/* 选择没有设定classy属性的p元素 */
p:not(.classy) { color: red; }
/* 选择以http://开头但不包含mysite.com的a元素 */
a[href^="http://"]:not([href*="mysite.com"])
1.2 名词解释
名词 | 解释 |
---|---|
祖辈 | 包含当前元素的标签都是当前标签的祖辈 |
父辈 | 当前元素的直接祖辈 |
后代 | 当前标签内的所有标签都是当前标签的后代 |
子代 | 当前标签的直接后代 |
同辈 | 当前标签的同级标签 |
二、CSS编码规范
2.1 使用规则
1、添加注释 /* */
2、把相同的属性抽取出来
3、根据用途起名而不是外观
4、不要体现具体位置
5、不要自我重复,可以对一个元素使用多个类
6、使用属性的简写形式,比如边距和线框
7、把相关的样式放在一起
8、使用注释区分不同的样式分组
使用多用样式表,比如:
创建color.css文件控制颜色,layout.css控制布局
然后创建一个外部样式表导入以上几个表:
@import url(main.css);
@import url(layout.css);
@import url(color.css);
@import url(forms.css);
消除浏览器的默认样式:
有些浏览器会自带一些样式,我们可以在样式表文件中先将其删除,再添加我们自己的样式。
// 去掉内外边距
// 使用一致的字号
// 设置一致的行高
// 改进表格的边框,创建一致的单元格
// 去掉图像链接的边框
// 设置一致的缩进和项目符号
// 去掉引用内容两侧的引号
比如我们这样初始化:
/* reset browser styles */
* {
box-sizing: border-box;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark,
audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-slign: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.2;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol {
padding-left: 1.4em;
list-style: decimal;
}
ul {
padding-left: 1.4em;
list-style: square;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* end reset browser styles */
9、标识主体
比如我们可以用类来或者标识版块,
可以用类来标识链接(推荐),
这样的类可能没有具体的样式代码,但是方便我们后续使用后代选择器对其它元素进行精准定位。
三、其他技术问题
3.1 缓存问题
我们可以在css文件的名称后面加上查询字符串,比如main.css?v=1
,
当我们以后更新css以后,可以将v的值改变,
这样浏览器就会认为这是一个新文件,
从而获取新版本,而不是使用缓存。
四、CSS值
4.1颜色
/* 颜色可以用关键字、RGB、RGBA来表示 */
/* 关键字有以下: */
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
/* 当使用RGB时,有以下几种方法 */
em { color: #f00 } /* #rgb */
em { color: #ff0000 } /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
/* 当给定的值不规范时 */
em { color: rgb(255,0,0) } /* integer range 0 - 255 */
em { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
/* RGBA 中A的值在0-1之间*/
em { color: rgb(255,0,0) } /* integer range 0 - 255 */
em { color: rgba(255,0,0,1) /* the same, with explicit opacity of 1 */
em { color: rgb(100%,0%,0%) } /* float range 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */
/* 亦支持HSL(色相hue、饱和度saturation、亮度lightness/luminance) */
* { color: hsl(0, 100%, 50%) } /* red */
* { color: hsl(120, 100%, 50%) } /* lime */
* { color: hsl(120, 100%, 25%) } /* dark green */
* { color: hsl(120, 100%, 75%) } /* light green */
* { color: hsl(120, 75%, 75%) } /* pastel green, and so on */
4.2 长度和尺寸
单位可选:英寸、派卡、点、厘米、毫米、em、ex、像素、百分比
但通常只考虑:像素、em、百分比
4.3 其他属性
关键字
比如指定一个图片:url(images/title.gif)
,URL中可选加引号。
4.2 继承、层叠
如果样式冲突时,谁的特指度大谁起作用。
一个标签选择符记1分;
一个类选择符记10分;
一个ID选择符记100分;
一个行内样式记1000分。
因为ID的特指度太高,所有我们一般避免使用id选择器。