CSS---总结

CSS

内部样式表

、、、

<style> div { color: red; font-size: 12px; } </style>

、、、 通过此方式，方便控制当前整个页面中的元素样式设置 但是没实现样式与结构完全分离

行内样式表

、、、

​

青春不常在，抓紧谈恋爱

​

、、、

• 可以控制当前的标签设置样式

外部样式表

适合于样式比较多的情况. 分为俩步： 1.新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。 2.在HTML页面中，使用<link>标签引入这个文件。 <link rel = "stylesheet" href="css文件路径">

复合选择器

伪类选择器

1. 未访问的链接 a:link 把没有点击过的(访问过的)链接选出来

2. a: vistited 选择点击过的（访问过的）链接

3. a:hover 选择鼠标经过的那个链接

4. a:active选择的是我们鼠标正在按下还没有弹起鼠标的那个链接

5. focus 伪类选择器用于选择取得焦点的表单元素。 焦点就是光标 input : focus{ background-color:yellow }

链接伪类选择器注意事项

1.为了确保生效，请按照LVHA的循顺序声明: -:link -:visted -:hover -:active 记忆法：LV 包包 hao 2.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要单独给链接指定样式。 3.开发中实际写法 /* a是标签选择器 所有链接/ 、、、 a { color: gray; } /hover是链接伪类选择器，鼠标经过/ a: hover { color: red; / 鼠标经过的时候，原来的灰色变成了红色*/ } 、、、

CSS的元素显示模式

块元素

常见块元素h1/p/div/ul/ol/li 块元素特点： 1.比较霸道，自己独占一行 2.高度，宽度，外边距以及内边距都可以控制。 3.宽度默认是容器的100% 4.是一个容器及盒子，里面可以放行内或者块级元素 注：文字类的元素内不能使用块级元素

行内元素

常见行内元素a/strong/b/em/i/del 行内元素的特点： 1.相邻行内元素在一行上，一行可以显示多个。 2.高、宽直接设置是无效的 3.默认宽度就是它本身内容的宽度 4.行内元素只能容纳文本或其他行内元素

• 链接里面不能再放链接

• 特殊情况链接<a> 里面可以放块级元素，但是给<a> 转换一下块级模式最安全

行内块元素

行内元素有几个特殊的标签 --- img/input/td，他们同时具有块元素和行内元素的特点 行内块元素的特点： ① 和相邻行内元素（行内块在一行上），但是他们之间会有空白缝隙，一行可以显示多个。 ② 默认宽度就是它本身容的宽度 ③ 高度，行高，外边距以及内边距都可以控制

元素显示模式转换

• 转换为块元素：display:block

• 转换为行内元素：display:inline

• 转换为行内块：display:inline-block

一个小技巧，单行文字垂直居中

• 让文字的行高等于盒子的高度

CSS的背景

背景颜色

background-color:颜色值；

• 一般情况下元素背景颜色默认值是transparent(透明)，我们可以手动指定背景颜色为透明色。

背景图片

• background-image属性描述了元素的背景图像。优点是非常便于控制位置。

• background-image : none | url (url)

背景平铺

• background-repeat: repeat | no-repeat|repeat-x|repeat-y

• 默认情况下背景是平铺的

• 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色

背景图片的位置

1. 利用 background-position属性可以改变图片在背景中的位置 background-position: x y; 2.参数位置是方位名词

• 如果指定的俩个值都是方位名词，则后俩个值的顺序无关，比如left top 和 top left效果一致

• 如果只指定了一个方位名词，另一个值省略，则第二个默认居中对齐 3.参数是精确单位，那么第一个肯定是x坐标，第二个一定是y坐标

• 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标

• 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中 4.参数是混合单位

• 如果指定的俩个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

背景图像固定

baground-attachment设置背景图像是否固定或者随着页面的其余部分滚动 baground-attachment后期可制作视差滚动效果。

baground-attachment : scroll | fixed

• scroll 背景图像是随对象内容滚动

• fixed 背景图像固定

背景复合写法

background: 背景颜色--->背景图片地址---->背景平铺---->背景图像滚动---->背景图片位置

背景色半透明

background: rgba(0,0,0,0.1);

• 最后一个参数是alpha透明度，取值范围在0-1之间

• 我们习惯把0.3的0省略掉，写为background：rgba(,0,0,.3);

CSS的三大特性

层叠性

• 样式冲突，遵循就近原则

• 样式不冲突，不会层叠

继承性

• 子元素可以继承父元素的样式（text-，font-，line-）这些元素开头的可以继承，以及color属性

• 行高的继承：①行高可以跟单位，也可以不跟单位 例：1.5为当前元素文字大小的1.5倍

优先级

• 选择器相同，则执行层叠性

• 选择器不同，则根据选择器权重写

• 权重叠加：复合选择器会有权重叠加的问题。 继承的权重是0

盒子模型

看透网页布局的本质

1.网页布局的过程

• 网页元素基本都是盒子

• 利用css设置好盒子样式

• 往盒子里面装内容

• 核心本质：利用css摆盒子

CSS3盒子模型

css3中可以通过box-sizing来指定盒子模型，有俩个值：即可指定为content-box、border-