2019-04-12
CSS连接方式
外部链接
<link rel="stylesheet" type="text/css" href="本地文件或跨域样式文件.css" />
HTML5标准可以忽略type属性。
内部引用
使用style标签直接把CSS内容加载到HTML文档内部
内联引用
通过style属性将CSS样式直接作用在HTML标签上。
CSS的基本语法
样式表具有继承性，其规则可从母体延续到子体。
样式表按照在HTML中的解析顺序执行。
注释使用/* */
CSS选择器
元素选择器
<style type="text/css">
元素{
属性名: 属性值;
}
</style>
<style type="text/css">
#标签ID{
属性名: 属性值;
}
</style>
ID选择器
在名字前加#，是惟一性选择器，对指定ID属性的标签有效。
<style type="text/css">
#元素ID值{
属性名: 属性值;
}
</style>
class选择器
在名字前增加”.”，是多重选择器，可以通过标签的class属性关联。
<style type="text/css">
.元素class值 {
属性名: 属性值;
}
</style>
元素可以设置多个class值，用空格分隔
<p class="cls1 cls2 cls3">段落</p>
通配符选择器
以*号标识 ，可以与任意元素匹配。其权重最低，如果有其他的定义，通配符选择器进行的定义会被覆盖。
子元素选择器
使用">"符号。符号左边是父元素，右边是子元素。
后代元素选择器
在两个选择器之间加入空格。后代包括子辈、孙子辈、曾孙子辈等，而子元素只包括子辈。
相邻元素选择器
用于选取和某个元素相邻的同级元素，语法关键字是"+"号。
例：h1+p 选择在p标签后面的h1标签
属性选择器
根据元素的属性及属性值来选择元素。语法关键字是[]号。
| 选择器 | 描述 |
|---|---|
| [attribute] | 选取带有指定属性的元素。 |
| [attribute=value] | 选取带有指定属性和值的元素。 |
| [attribute~=value] | 选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
组选择器
如果要对多个元素定义相同的样式，可以使用组选择器缩减重复代码。语法关键字是","号。
#mainMenu，#subMen { /*…….两个块的共同样式……*/}
复合选择器
用于表示具有"与"关系的选择器，将其连在一起写即可，中间不要有空格。
div.myclass {
border:2px dotted black;
background-color:red;
}
/*对div且class值为myclass的标签有效*/
CSS长度单位
相对长度
| 长度单位 | 说明 |
|---|---|
| px | 像素Pixels相对于显示器分辨率而言。会因为浏览者的屏幕分辨率不同而造成显示上的效果差异。网页字体大小一般使用12px或14px，黑体可使用18px； |
| em | 相对于当前对象内文本的字体尺寸。如果现在的字体大小为 12px，那么1.5em=18px。<br /> 若当前文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 通常用于响应式布局。 |
| ex | 相对于字符”x”的高度。此高度通常为字体尺寸的一半。 |
| % | 百分比，通常用于响应式布局。 |
绝对长度
| 长度单位 | 说明 |
|---|---|
| in | 英寸Inches (1英寸 = 2.54厘米) |
| cm | 厘米Centimeters |
| mm | 毫米Millimeters |
| pt | 磅Points (1磅 = 1/72英寸) |
| pc | 皮卡Picas (1皮卡 = 12磅) |
CSS颜色设置
1.十六进制表示法: #rrggbb
2.短16进制表示法: #rgb
3.十进制表示法：rgb (x,x,x) x是介乎0~255之间的整数。
4.百分比表示法：rgb(x%,x%,x%) x是介乎0~100之间的整数。值为0也要写百分比符号。
5.预定义名称表示法：例如red、green、blue。
6.RGBA模式
在RGB基础上添加Alpha透明通道，0表示完全透明，1表示完全不透明。
语法格式：rgba(红色值,绿色值,蓝色值,透明度);
说明：颜色取值为0-255,透明度取值为0-1。
7.HSL模式
通过对色调(H)、饱和度(S)、亮度(L)3个颜色通道的变化以及相互之间的叠加来获得各种颜色。
HSL的3个参数说明如下：
H：Hue(色调)。取值范围为：0 – 360。0(或360)表示红色，60表示黄色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。
S：Saturation(饱和度)。即该色被使用了多少，或者说是颜色的深浅程度、鲜艳程度。取值为：0.0% - 100.0%。其中0%表示灰度，即没有使用该颜色；100%饱和度最高，即颜色最纯。
L：Lightness(亮度)。取值为：0.0% - 100.0%。其中0%最暗，显示为黑色；50%表示均值，100%最亮，显示为白色。
8.HSLA模式
在HSL模式基础上增加Alpha透明通道，0表示完全透明，1表示完全不透明。
网友评论