HTML以及css基础（三）

 

css篇

一、css:层叠样式表（Cascading  style sheets）,用于控制网页样式。

　　1.css由选择器和声明构成，其中声明包括属性和属性值。

　　2. 属性与属性之间用分号隔开，属性与属性值用冒号连接。最后一个分号可以省略，但建议不要省略。

二 、css常用选择器：标签选择器、ID选择器、class选择器、特殊（伪类）选择器、群组选择器、嵌套（包含）选择器。

　　1. 标签选择器的作用：想改变某个默认元素的样式。

　　2. 类选择器：需要引用才能生效，可以引用多个，用空格分开，类选择器更适合定义一类。（类名尽量语义化，可以使用英文单词）

　　3. ID选择器：唯一的，一般用于网页的外围结构。ID选择器只能有一个，不能有多个，不可出现重复的ID名。

　　4.伪类选择器：：link、：hover、：active、：visited。

　　　　例如常出现的问题是：四个状态点击一次后就没有了，原因是伪类选择器，顺序出现问题，顺序为link、visited、active、visited）。一般只设置两个，默认和滑过。

　　5.群组选择器：一般用于改变不同类型设置相同样式。（例：选择器一，选择器二：{属性：属性值}）。

　　6. 包含选择器（嵌套/后代）：用于有父子关系和一些嵌套元素的样式。

三 、 表示颜色的三种方式： 英文单词（例如red等）、6个十六进制数（例#000000，两个一样的可以省略写一个例：#336699可以省略为#369）、RGB（115,3,3）（一般是0-255）

　　1. rgba（255,0,0,0.5）a表示透明度（0-1，高版本的浏览器才能识别）

　　2.常见的颜色：#F00红色   #000 黑色   #FFF 白色   #0F0 绿色  #00F 蓝色 #333 深灰  #999 浅灰

　　3. 通配符*：一般用于重置样式，可以去掉空行。*{padding：0；margin：0}该样式适用于所有网页元素。

四、选择器权重：

　　多个选择器放在一起，生效的是自身样式大于继承的。

　　继承的权重最小为0000；标签选择器为0001；class选择权重为0010；ID选择器权重为0100；内联样式权重为1000；嵌套选择器为选择器之和。

　　高权重的样式覆盖低权重的的样式，权重一样，采用就近原则。

五、样式表分为：

　　1. 内联样式（行内，行间）直接写在HTML标签里。

　　2. 内部样式：写在head标签中，用style标签。

　　3.外部样式：需要引用才能生效。有两种方式引用外部样式的：link和@import。

　　<link  href="路径"  rel="stylesheet"> </link>rel 用于定义文档关联，表示关联样式表。

　　4. 两种样式表的区别：

　　　　4.1 本质不一样：link是由HTML提供，而@import是由css提供的link还能引用其他文件，而@import只能引用css文件

　　　　4.2 加载速度不一样：linkHTML加载时css文件也加载，而@import在HTML完全加载完在加载，这样用户体验度不好。

　　　　4.3 兼容性有差别：@import是css2.1提出的，只能在IE5 以上才能支持，而link无此要求。

　　　　4.4 控制DOM时有差别：link支持而@import不支持。

　　5. 三种样式表优先级：内联样式表优先级最高，内部样式表和外部样式样与书写顺序有关，谁在后面shu生效。

　　margin:0 auto;可以实现上下为0，左右居中。

六、文字的设置

　　1.font-size（字体大小）默认为16px;常用的为12、16、18等偶数。1em = 16px;9pt =12px;

　　2. font-weight（字体加粗）:bold（加粗）、normal（正常）、100-500正常、600-900加粗字体。

　　3. font-style（斜体）：italic（倾斜）、normal（正常）。

　　4. font-family（字体）：默认宋体，英文默认Arail；多个字体之间用逗号隔开，一个单词 不用加引号，多个单词组成加引号。

　　5. line-height：行间距（24px）可以使具体的倍数，不加单位。只有单行文本当高度等于行间距时，可以实现垂直居中。

　　6. font-variant：把小写字母变成小型大写字母；small-caps:

　　一些需要注意的：属性值是数字时一般都要加单位，单位为px，0可以不加，也可以是pt。标准字体为16px;即1em，基于body字体（父元素）；rem根据HTML根标签计算。

　　7. 文字复合式写法 font：style variant  weight size/line-height  family。简写为：font:size/line-height family。

七、文本的设置

　　1. text-align：left（默认）、center、right、justiy（两端对齐）。

　　2. vertial-align:top(默认)、middle、bottom.

　　3.text-indent:32px;(两个字)可以设置负值，悬挂缩进，可以隐藏文本；首行缩进，只对第一行起作用。

　　4, 英文单词和文字遇到边界都会换行，英文字母遇到边界不会换行。

　　5.vertial-align：middle；对连着图片的文字设置垂直居中。

　　6. letter-spacing：字间距；word-spacing：词间距。

　　7. text-decoration：none去掉超链接中的下划线；underline（下划线）；overline（上划线）、line-through（删除线）；三个可以一起出现。

　　8. text-transform：capticalize（把单词首字母换成大写字母）uppercase(全部大写)、lowercase（全部小写）。

　　9. text-shaow（阴影）：水平偏移   垂直偏移  模糊程度 阴影颜色。

　　line-height:行间距等于行高时；可以实现垂直居中；单行文本的行高小于容器时居上，大于时居下。

八、背景设置省略形式background:颜色  url(图片)  重复方式 位置。（背景色和背景图片可以同时存在）

　　1.background-image:url(图片路径)、background-color:背景的颜色、background-repeat:背景重复  、背景图片位置 background-position (可以设置一个值center；可以设置两个先上下 后左右；四个值：上右下左。）background-attachment:背景图片固定，有两个参数fixed和scroll。

九、图片格式

png可以储存透明，完爆gif的地方在于失真小，没锯齿；劣势是不支持动画；

jpg适用于摄影图片，以及色彩丰富的图片。它采用压缩算法，损失自身的质量来减小图片体积，像素点越多越清晰。

.gif有损压缩格式，损失图片的色彩数量来减少体积。

 

转载于:https://www.cnblogs.com/shwam/p/7895551.html