CSS3学习小结

简介

CSS（cascading style sheet）级联样式、层叠样式

显示数据与显示分离：

• 网页的数据由html5提供
• 网页的显示由css3控制
• 网页的行为由JavaScript实现

CSS样式

1、行内样式

写在标签之内写style属性，style属性中写CSS代码

例：<div style="color:xx; ... "> xxx </div>

2、内嵌样式

在head标签中增加style标签，集中写CSS代码

3、链接样式

单独写一个CSS文件，head中用link标记使用CSS文件

链接：<link type...

4、导入样式

导入CSS代码 @import

CSS选择器

1、标签选择器

标签名{...}

2、类选择器

从·号开始自定义名称来定义CSS样式，html标签用class属性选择

3、ID选择器

从#号开始自定义名称来定义CSS样式，id属性的值唯一

4、包含选择器

selector 1 selector 2 {...}

5、子选择器

selector 1 > selector 2 {...}

6、合并声明

selector 1,selector 2 {...}

7、兄弟选择器

selector 1 ~ selector 3{...} 匹配selector后能与2匹配的节点

8、属性选择器

• E[attribute] 选取带有指定属性的元素
• E[attribute=value] 选取带有指定属性和值的元素
• E[attribute~=value] 选取属性值中包含指定词（以空格隔开）的元素
• E[attribute|=value] 选取带有以指定值开头（连字符分隔）的属性值

9、伪元素选择器

只针对CSS中的·伪元素起作用

• :first-leffer：指定对象的第一个字符
• :first-line：第一行
• :before:与内容相关的属性结合使用，在指定对象内部的前端插入内容
• :after：与内容相关的属相结合使用，在指定兑现内部的尾端插入内容

10、浏览器专属属性

• -ms- Microsoft
• -moz- Mozilla（Firefox）
• -o- Opera
• -webkit- Webkit（Chorme、Safari）

字体与文本属性

• Font：复合属性，形式如font-style、font-weight等
• font-size：字体大小 font-style：字体风格 font-family：字体
• font-weight：加粗（100~900）
• font-size-adjust：对不同字体尺寸进行微调
• Color：文本颜色
• word-spacing：单词间距
• text-shadow：字体阴影
• line-hight：行高
• letter-spacing：字间距
• text-shadow：cradius：阴影的模糊半径，越大越模糊
• 属性值：color xoffset yoffset length或xoffset yofset radius color
• text-indent：文本缩进
• text-overflow：控制溢出文本的处理方法
• Clip：hidden属性值，溢出时，clip裁切溢出的文本
• Ellipsis：溢出时显示（...）
• vertical-align：垂直对齐方式
• 属性值：auto、baseline、sub、top、middle、bottom
• text-align：水平对齐方式
• 属性值：left、center、right
• Direction：文本流入方向
• 属性值：ltr（从左到右）、rtl（从右到左）
• word-break：文本内容的换行方式
• 属性值：normal：浏览器换行规则
• keep-all：在半角空格或连字符处换行
• break-all：允许在单词中间换行

服务器字体

@font-face{

    font-family：自定义字体名

    Src：local（“优先本地字体”），url（“服务器字体”）字体格式（TrueType|OpenType）；

    其他字体规则

}

背景属性

• backgroud：复合属性
• backgroud-color：背景颜色 backgroud-image：背景图片
• backgroud-position：背景相对位置
• backgroud-repeat：repeat-x repeat-y repeat no-repeat
• backgroud-attachment：背景图随对象滚动固定不变 scroll fixed

CSS3新增多背景

 

 

本文地址：https://blog.csdn.net/qq_41554330/article/details/107391215