CSS样式（一）
一、样式表的应用
默认样式
-
行内样式
<p style="color: red; margin-left: 20px"> This is a paragraph </p> -
嵌入样式
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
-
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"/> </head>
二、样式表选择器
| 名称 | 符号 | 例 |
|---|---|---|
| 标签选择器 | 标签名称 | h1 |
| 组选择器 | ， | h1,h2 |
| 包含（后代）选择器 | 空格 | h1 p |
| 子元素选择器 | > | h1>p |
| 相邻兄弟选择器 | + | h1+h2 |
| 所有兄弟选择器 | ~ | h1~h2 |
| 类选择器 | . | .+Class名称 |
| ID选择器 | # | #+ID名称 |
| 通用选择器 | * | * |
| 属性选择器 | [属性名称] | h1[属性名称] |
| 伪类选择器 | 选择器:伪类名 | http://www.w3school.com.cn/cssref/css_selectors.asp |
三、伪类选择器
| 属性 | 作用 |
|---|---|
| x:link | 未被访问的 |
| x:visited | 已被访问的 |
| x:hover | 鼠标指针移动到连接上 |
| x:active | 正在被点击的 |
| x:first-child | 匹配父元素第一个子元素 |
| x:last-child | 匹配父元素最后一个子元素 |
| x:focus | 匹配获得当前焦点的x元素 |
| x:lang(c) | 匹配；lang属性等于c的e元素 |
四、伪元素
| 属性 | 作用 |
|---|---|
| E:first- line | 匹配E元素的第一行 |
| E:first- letter | 匹配E元素的第一个字母 |
| E:before | 在E元素之前插入生成的内容 |
| E:after | 在E元素之后插入生成的内容 |
// 例： a::before { content: "网站"; display: inline-block; background: red; color: white; }
content的特殊值：
none ：不生成任何内容
attr ：插入标签属性值
url ：使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
string：插入字符串（如：""）
五、计算特殊性值
计算特殊性值：!important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
权重、特殊性计算法： CSS样式选择器分为4个等级，a、b、c、d
-
如果样式是行内样式（通过Style=“”定义），那么a=1，1,0,0,0
-
b为ID选择器的总数 0,1,0,0
-
c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0
-
d为标签、伪元素选择器的数量 0,0,0,1
-
!important 权重最高，比 inline style 还要高
特殊性示例
| 选择器 | 特殊性 | 以10为基数的特殊性 |
|---|---|---|
| style="" | 1,0,0,0 | 1000 |
| #wrapper #content{} | 0,2,0,0 | 200 |
| #content .detePosted{} | 0,1,1,0 | 110 |
| div#content{} | 0,1,0,1 | 101 |
| #content{} | 0,1,0,0 | 100 |
| p.comment .deteposted{} | 0,0,2,1 | 21 |
| p.comment{} | 0,0,1,1 | 11 |
| div p{} | 0,0,0,2 | 2 |
| p{} | 0,0,0,1 | 1 |
六、鼠标样式
| 属性 | 值 |
|---|---|
| cursor |
auto 是由系统自动给出效果 default 是默认效果 pointer 鼠标手 ext 是移动到文本上的那种效果 wait 是等待的那种效果 n-resize 是向上的箭头 （↑） s-resize 是向下的箭头 （↓） w-resize 是向左的箭头 （←） e-resize 是向右的箭头 （→） ne-resize 是向右上的箭头 （↗） nw-resize 是向左上的箭头 （↖） se-resize 是向右下的箭头 （↘） sw-resize 是左下的箭头 （↙） not-allowed 是不可点击 |
七、文本样式属性
| 属性 | 值 |
|---|---|
| font-size | font-size:12px; |
| font-weight |
bold （加粗） lighter (细) normal （略粗） bolder （粗） 100~900 |
| font-family | 字体（宋体） 【例：font-family:"隶书";】 |
| font-style |
normal (正体) italic (斜体) oblique(倾斜体) |
| font-variant | small-caps【显示大写字母的字体。】 |
| text-transform |
控制文本的大小写 none： 默认。定义带有小写字母和大写字母的标准的文本。 capitalize： 文本中的每个单词以大写字母开头。 uppercase：定义仅有大写字母。 lowercase： 定义仅有小写字母。 |
| color |
#00C 颜色 rgb(10,30,10) RGB(红色,绿色,蓝色) rgba(10,30,10,0.5)) RGBA(红色,绿色,蓝色,透明度0-1(0:全透明 1:不透明)) |
| text-align |
center （左右居中） left （左） right （右） justify（水平分散对齐） |
| vertical-align |
middle (中间对齐) top (上对齐) bottom (下对齐) |
| line-height | 数字px（上下居中） |
| text-indent | 数字+em（设置首行文本缩进） PX固定单位 EM相对单位 |
| padding-left | 数字+em（缩进文本） |
| letter-spacing | 增加或减少字符间的距离 |
| text-decoration |
none （无） underline （下划线） overline （上划线） line-through（中划线） blink （闪耀） |
| direction |
ltr（默认：从左到右） rtl（从右到左） |
| text-shadow | xpx xpx xpx #eee(颜色) 【水平阴影 垂直阴影 模糊距离 颜色】 阴影 |
| Word-wrap | break-word（自动换行） |
| word-break | 指定断行规则 normal：使用浏览器默认的换行规则。 break-all：允许在单词内换行。 keep-all：只能在半角空格或连字符处换行。 |
| word-spacing | 增加或减少字与字之间的空白 |
| display |
none;(隐藏) block;(显示) |
| text-overflow |
当文本溢出包含它的元素，应该发生什么。 clip：修剪文本。 ellipsis：显示省略符号来代表被修剪的文本。 string：使用给定的字符串来代表被修剪的文本。 |
| white-space |
指定元素内的空白怎样处理 normal：默认。空白会被浏览器忽略。 pre：空白会被浏览器保留。 nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。 pre-wrap：保留空白符序列，但是正常地进行换行。 pre-line：合并空白符序列，但是保留换行符。 |
caption 使用标题控件的字体（比如按钮、下拉列表等）。
icon 使用用于标记图标的字体。
menu 使用用于菜单中的字体（下拉列表和菜单列表）。
message-box 使用用于对话框中的字体。
small-caption 使用用于标记小型控件的字体。
status-bar 使用用于窗口状态栏中的字体。
/*限制显示行数（字数）3行*/ column-count: 3; /*分3栏*/ column-gap: 40px; /*栏间距*/ column-rule: 2px solid lightgreen; /*栏间分隔线，与border设置类似
八、背景样式属性
| 属性 | 值 |
|---|---|
| (背景颜色) background-color |
#00C 颜色 rgb(10,30,10) RGB(红色,绿色,蓝色) rgba(10,30,10,0.5)) RGBA(红色,绿色,蓝色,透明度0-1(0:全透明 1:不透明)) (transparent 透明色) |
| (背景图片) background-image |
url(路径) （背景图片） 【规定要使用的背景图像】 url(路径1),url(路径2) (多重复背景图片) 【规定要使用的背景图像】 |
| （背景图片配置） background-repeat |
repeat (沿水平和垂直连个方向平铺 no-repeat (图片不重复) repeat-x; (水平重复) 【规定如何重复背景图像。】 repeat-y; (垂直重复) |
| （规定背景图像的位置） background-position |
center; (居中) bottom (底部) top (顶部) left (左) right (右) x轴(数组+单位) y轴(数字+单位) (图片定位) |
| 背景复合属性 | background:图像 颜色 背景 定位 |
| (规定背景图像是否固定或者随着页面的其余部分滚动。) background-attachment | fixed; (固定图片) |
| (规定背景图片的尺寸) background-size |
auto (默认值 使用背景图片保存不变) percentage (根据背景大小定义图片百分比) cover (整个背景图片放大填充整个元素) contain (根据自身宽高定义填充) xxpx xxpx; (图片大小） |
| background-origin | 规定背景图片的定位区域。 |
| background-clip | 规定背景的绘制区域。 |
/* 图片大小比例不变，居中显示，超出不显示 */ object-fit: cover; /* 图片水平居中：写在父元素 */ text-align: center; /* 图片垂直居中：写在img样式 */ vertical-align: middle;
九、渐变
| 属性 | 值【说明】 |
|---|---|
| background:linear-gradient() |
linear-gradient([[<angle>],]? <color-stop>[, <color-stop>]+) 1、<angle>:用角度值指定渐变的方向（或角度）。 （1）、to left ： 设置渐变为从右到左。相当于: 270deg （2）、to right ： 设置渐变从左到右。 相当于: 90deg （3）、to top ： 设置渐变从下到上。 相当于: 0deg （4）、to bottom： 设置渐变从上到下。 相当于: 180deg。这是默认值 2、 <color-stop>：用于指定渐变的起止颜色 （1）、color ： 指定颜色。 （2）、length ： 用长度值指定起止色位置。不允许负值 （3）、percentage： 用百分比指定起止色位置。 |
十、表格样式属性
| 属性 | 值 |
|---|---|
| border |
1px solid blue;【 大小 样式 蓝色】 dashed 【虚线】 dotted 【点线式边框】 solid 【直线式边框】 double 【双线式边框】 groove 【槽线式边框】 ridge 【脊线式边框】 inset 【内嵌效果的边框】 outset 【突起效果的边框】 |
| border-collapse | collapse;【2线重合】 |
| background-image | middle; 【垂直对齐方式】 |
| table-layout |
设置表格布局算法 automatic：默认。列宽度由单元格内容设定。 fixed：列宽由表格宽度和列宽度设定。 |
| padding | Xpx 【表格内边距】 |
| outline-style | 边框样式（实线、虚线...） |
| outline-color | 颜色 |
| outline-width | 宽度 |
| border-radius | border-radius:70px;/圆角/ |
| colspan | 指定要合并的列数目 <td colspan="3"></td> |
| rowspan | 指定要合并的数目 <td rowspan="3"></td> |
十一、列表样式属性
| 属性 | 值 |
|---|---|
| 【符号】 list-style-type |
none 【无标记符号】去除符号 disc 【实心圆】 circle 【空心圆】 square 【实心正方形】 decimal【数字】 |
| line-height | 设置以百分比计的行高 |
| list-style-image | list-style-image:url("sqpurple.gif")【引入图片】 |
| list-style-position | 列表项目标记的位置 |
| float | left 【横向排列】 |
| display | inline 【横向排列】 |
| reversed | reversed【规定列表顺序为降序】 |
| start | number 【规定有序列表的起始值】 |
| type | 左上 右上 右下 左下 【圆角边框】 |
十二、盒子模型
| 属性 | 值 |
|---|---|
| border |
1px solid blue;【 大小 样式 蓝色】 dashed 【虚线】 dotted 【点线式边框】 solid 【直线式边框】 double 【双线式边框】 groove 【槽线式边框】 ridge 【脊线式边框】 inset 【内嵌效果的边框】 outset 【突起效果的边框】 |
| border-color | (上 右 下 左) 【颜色】 |
| border-width | (上 右 下 左) 【粗细】 |
| margin | 0px auto;(上下 左右） 【外边距】 |
| padding | 上 右 下 左 【内边距】 |
| 【width(padding+border)+margin】 border-box (盒子的宽高等于设置的宽高) |
content-box (默认盒子的总尺寸) 【width + border + padding+margin】 box-sizing inheritt (继承父元素的盒模型) |
| border-radius | 1、A、a、I、i 【规定在列表中使用的标记类型】 |
| box-shadow |
0 0 5px 0 #000 inset 【水平 垂直 模糊值 阴影外延值 颜色 内阴影】【盒子阴影】 inset【不写为外阴影】 |
| border-radius:70px; | 圆角 |
| outline | outline:#00FF00 dotted thick;【设置元素周围的轮廓】 |
十三、浮动
| 属性 | 值 |
|---|---|
| float |
none left (左浮动) right (右浮动) lnhe (默认值 不浮动) |
| clear |
left (清除左侧浮动 不允许左侧有浮动) right (清除右侧浮动 不允许右侧有浮动) both (清除左右侧浮动 不允许左右侧有浮动) none (默认值 允许有浮动) |
十四、定位网页元素
| 属性 | 值 |
|---|---|
| position |
static 静态定位 (默认值 没有定位) relative 相对定位 (根据原来自己位置定位 保留原来位置 不影响其他元素的位置) absolute 绝对定位 (根据父级定位来定位自己 不保留原来位置 影响其它元素位置) fixed 固定定位 （根据浏览器定位自己 ） 偏移设置 top:0px left:0px right:0px bottom:0px |
定位属性：
| 属性 | 描述 |
|---|---|
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 |
| clip | 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 |
| vertical-align | 设置元素的垂直对齐方式。 |
| z-index | 设置元素的堆叠顺序。 |
十五、 刻度
在CSS中刻度是用于设置元素尺寸的单位。
1、特殊值0可以省略单位。例如：margin:0px可以写成margin:0
2、一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
3、长度单位包括包括：相对单位和绝对单位。
（1）、相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
（2）、绝对长度单位包括有： cm, mm, q, in, pt, pc, px
4、绝对长度单位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
5、动态计算长度值：calc() = calc(四则运算) 例：用于动态计算长度值。
（1）、需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
（2）、任何长度值都可以使用calc()函数进行计算；
（3）、calc()函数支持 "+", "-", "*", "/" 运算；
（4）、calc()函数使用标准的数学运算优先级规则；
6、文本相对长度单位： 注：浏览器的默认字体大小为16像素
（1）、em：相对长度单位。 相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置， 则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)
（2）、rem：是CSS3新增的一个相对单位，相对于根元素(即html元素)font-size计算值的倍数 相对是的HTML元素的字体大，默认16px
rem：是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。 em ：是指相对于父元素的字体大小的单位。 它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
