7.19——CSS

CSS（对网页的修饰优化）

整体调整样式

便签style
td{

background-color:gray;

}选择所有的td元素改变他的背景

selector{property：value}

选择器{属性：值}

选择器

元素选择器

id选择器

​ 不同的元素有不同的id对同类元素不同id做样式

类选择器

分类进行class分类

注释

/**/

尺寸

width:(设置比例percentage)（设置像素pix）

height:

背景

颜色

属性名background-color
颜色的值可以采用3种方式
\1. 预定义的颜色名字
比如red,gray,white,black,pink，参考颜色速查手册
\2. rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
\3. 16进制的表示
#00ff00 等同于 rgb(0,255,0)

图片做背景

background-image:url(/study/background.jpg);

背景重复

background-repeat属性
值可以选
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复

背景水平重复

背景平铺

属性background-size

值：contain

文本

文字颜色

属性名：color

对齐

属性：text-align:文本在格子里的位置左边右边中间

值：left,right,center

文本修饰

属性：text-decoration

值：overline上划线；Line-through删除效果；underline:下划线；blink闪烁效果；none;

行间距

属性：line-height

值：数字百分比

字符间距

属性：letter-spacing

值：数字

单词间距

属性：word-spacing
值： 数字

首行缩进

属性：text-indent
值： 数字

大小写

属性：text-transform
值：
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写

空白格

属性：white-space
值：
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格，显示多少空白格，相当于[pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
nowrap 一直不换行，直到使用br

字体

尺寸

属性：font-size
值：数字或者百分比

风格

font-style:
normal 标准字体
italic 斜体

粗细

属性 font-weight
normal 标准粗细
bold 粗一点

字库

属性font-family

声明在一起

把大小，风格，粗细，字库都写在一行里面

鼠标样式

表格

表格布局

属性：table-layout

值：automatic(单元格的大小由内容决定);fixed（单元格的大小由设置的宽度决定）

表格边框

属性:border-collapse

值：separate边框分隔;collapse边框合并;

边框

边框风格

属性：border-style

值：solid实线；dotted:点状；dashed：虚线；double:双线

边框颜色

属性：border-color

值：fed#ff0000;rgb(255,0,0);

边框宽度

属性：bprder-width

值:数字

只有一个方向有边框

top;bottom;left;right上下左右

border-top-color;

border-top-width;

块级元素和内联元素的区别

块级元素默认是百分百宽度div

内联元素按照内容本身设置宽度span

内边距（边框之中的内容和边框的距离）

属性：padding-left

值：数字

内边距值写几个？1个指的是上下左右四个方向；

4个是上右下左顺时针方向

外边距

属性：margin-left

值：数字

边框和边框之间的距离

边框模型

超链状态

伪类，所谓的伪类即被选中的元素处于某种状态的时候
超链状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候

去除超链的下划线

text-decoration:none;

隐藏

使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”

css文件

直接在html中写样式

写style.css文件，让html调用需要在html中写上链接代码

优先级

style标签和外部文件style.css中的样式发生了矛盾，采用后面出现的那一个

style标签和style属性后者的优先级更高

！important优先级最高

布局

绝对定位

简单来说就是吧文字固定到某一个位置

根据定位了的父容器；如果没有那么就采用body

通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。

重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用

z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。

相对定位

属性:position;

值：relative;

浮动

属性:float

值：left,right

浮动的文字会把坑让出来，达到文字围绕的效果

不想让文字围绕；采用属性：clear; 值：left,right,both,none;

默认的div会发生换行；采用float水平排列

显示方式

隐藏

display:none;

块级

display:block;块级根据本身设置；内联根据其中内容的多少

将内联换成块级进行改造

内联

display:inline;没有还行长宽高无效

内联-块级

display:inline-block

内联是不换行，但是不能指定大小
块级时能指定大小，但是会换行

水平居中

内容居中

align=“center”

元素居中

div默认占用100%宽度无法观察是否居中；先设置宽度在采用margin:0 auto居中

span是内联元素无法设置margin：0 auto居中；放在div里面让div text-align实现居中

左侧固定

左边固定，右侧自动占满

垂直居中

line-height方式

适合单独一行的居中

内边距式

借助上下内边距相同实现垂直居中，用于多内容

padding

table方式

首先用display:table-cell将div设置成table的形式

然后用单元格的vertical-align:middle;居中

左右固定

左右固定，中间自适应的布局

贴在下方

绝对定位

bottom：0

块之间有空格

在写代码的时候需要代码整齐不连续的写span这样会产生空格

如何解决：

利用float:left

记得加上

span是内联元素无法设置margin：0 auto居中；放在div里面让div text-align实现居中

左侧固定

左边固定，右侧自动占满

垂直居中

line-height方式

适合单独一行的居中

内边距式

借助上下内边距相同实现垂直居中，用于多内容

padding

table方式

首先用display:table-cell将div设置成table的形式

然后用单元格的vertical-align:middle;居中

左右固定

左右固定，中间自适应的布局

贴在下方

绝对定位

bottom：0

块之间有空格

在写代码的时候需要代码整齐不连续的写span这样会产生空格

如何解决：

利用float:left

记得加上