css基础知识整理欢迎大家提出问题后续持续更新

来源：互联网发布：vi保存退出ubuntu 编辑：程序博客网时间：2024/06/06 02:32

第三章 CSS3入门

3.2 css核心基础

1 css样式规则

选择器{属性1：属性值1；属性2：属性值2；}

注意：选择器区分大小写，属性和值不区分大小写；

如果属性值由多个单词组成且中间包括空格，这这个属性值必须添加英文双引号

2 引入css样式表

1、行内式

<标记名 style=”属性1：属性值1；属性2：属性值2；”>内容</标记名>

2、内嵌式

<head>

<styletype=”text/css”>

选择器{属性1：属性值1；属性2：属性值2；}

</style>

</head>

3、嵌入式

<head>

</head>

3 css基础选择器

1、标记选择器

标记名{属性1：属性值1；属性2：属性值2；}

2、类选择器

.类名{属性1：属性值1；属性2：属性值2；}

引用方法：class=”类名”

3、id选择器

#id 名{属性1：属性值1；属性2：属性值2；}

4、通配符选择器

*{属性1：属性值1；属性2：属性值2；}

5、标签指定选择器

p{color:blue;}

.special{color:green;}

p.special{color:red;}

6、后代选择器

pstrong{color:red;}

7、并集选择器

h3,.special,#one{color:red}

3.3文本样式属性

1 字体样式属性

1、font-size：字号大小

（em、px）

2、font-family：字体

3、font-weight：字体粗细

（normal、bold、bolder）

4、font-style:字体格式

（normal、italic < 斜体字体样式>、oblique<倾斜字体样式>）

5、font：综合字体样式

必须保留font-size和font-family属性，否则font属性不起作用

6、@font-face属性：提取服务器字体

@font-family{

font-family：jianzhi；

src：url (字体路径)

}

7、word-wrap属性

（noraml、break-word<长单词或者URL地址内部进行换行>）

2 文本外观属性

1、color：文本颜色

2、letter-spacing：字间距

（normal、px、em）

3、word-spacing：单词间距

（normal、px、em）

4、line-height：行间距

（px、em、百分比%）

5、text-transform：文本转换

（none、capitalize<首字母大写>、uppercase<全部字符转换为大写>、lowercase<全部字符转换为小写>）

6、text-decoration：文本装饰

（none、underline<下划线>、overline<上划线>、line-throug<删除线>）

7、text-align：水平对齐

（left、right、center）

8、text-ident：首行缩进

（px、em、百分比%）

9、white-space：空白符处理

（normal<常规默认，文本中的空格空行无效>、pre<预格式化，按照输入>、nowrap<空格空行无效，强制不能换行>）

10、 text-shadow：阴影效果

选择器{text-shadow:h-shadow v-shadow blur color}

(h-shadow：水平阴影距离 v-shadow：垂直阴影距离 blur:模糊半径 color:阴影颜色)

11、 text-overflow:表示对象内溢出文本

选择器{text-overflow：属性值}

(clip：修剪溢出文本，不现实”….”、ellipsis：用”…..”显示被修剪文本)

3.4 CSS高级特性

1 CSS层叠性和继承性

1、层叠性:多个选择器定义的样式可以叠加

2、继续性：子标记会继承父元素的某些标记

2 CSS优先级

标记选择器权重为1；类选择器权重为10；id选择器权重为100。

!important命令被赋予最大优先级 p{color:red!importnat}

第四章 CSS3选择器

1 属性选择器

1、E[attˆ=value]属性选择器

(以value字符串开头的元素)

2、E[att$=value]属性选择器

(以value字符串结尾的元素)

3、E[att*=value]属性选择器

(包含value字符串的元素)

2 关系选择器

1、子代选择器（>）

2、兄弟选择器（+、~）

a、临近兄弟选择器：+

b、普通兄弟选择器：~

3 结构化伪类选择器

1、：root 对页面所以元素都有效

2、：not 对某种元素使用样式，排除这个结构元素下面的子结构元素

3、：only-child选择器某个父类元素仅有一个子元素，则使用：only-child选择器

4、：first-child和：last-child选择器父类元素中的第一个和最后一个子元素

5、：nth-child（n）和nth-last-child（n）选择器父类元素中的某一个或者倒数某一个元素（与元素类型无关）

6、：nth-of-type（n）和：nth-lsat-of-type（n）选择器父类元素中的相同元素某一个或者倒数 (与元素有关) odd：奇数 even：偶数

7、：empty 选择器用来选择没有子1元素或者文本为空的所以元素

8、：target选择器点击了页面中的超链接，并且跳转到target元素后，：target选择器生效

4 伪元素选择器

1、：before选择器用于在被选元素的内容前面插入内容

<元素>：before

{

content：文字/url ( )

2、after选择器用于在某个元素之后插入一些内容，使用方法同:before选择器

5 超链接伪类

a:link{CSS样式规则；} 未访问时超链接状态

a：visited{CSS样式规则；} 访问后超链接状态

a：hover{CSS样式规则；} 鼠标经过、悬停时超链接状态

a：active{CSS样式规则；} 鼠标点击不动时超链接的状态

第五章 CSS盒子模型

1 盒子模型概述

1、<div>标记一个区块容器标记，主要用于布局

2、盒子的宽与高

(width与height设置盒子宽高<百分比%、px>)

2 盒子模型的相关属性

1、边框属性

1) 边框样式（border-style）

border-style: 上边右边下边左边 (一值为4边、两值为上下/左右、三值为上/左右/下)

<solid：单实线、dashed：虚线、dotted：点线、double：双实线>

2) 边框宽度 (border-width)

border-width：上边右边下边左边 (一值为4边、两值为上下/左右、三值为上/左右/下)

使用前必须设置边框样式

3) 边框颜色：（border-color）

border-color：上边右边下边左边

（border-top-colors、border-right-colors、border-bottom-colors、border-left-colors）

使用前必须设置边框样式

4) 综合设置边框

border：宽度样式颜色 (顺序不分先后)

（border-top：、border-rightrs：、border-bottom：、border-left：）

5) 圆角边框

border-radius：参数1/参数2

(参数1：圆角水平半径、参数2：圆角垂直半径)

参数1和参数2设置一个参数值时，表示4个角的圆角半径

参数1和参数2同时设置两个参数值时，参数1表示左上和右下圆角半径/参数2表示右上和左下圆角半径

参数1和参数2同时设置三个参数值时，参数值1表示左上圆角半径，参数值2表示右上和左下圆角半径，参数3表示右下圆角半径

6) 图片边框

border-image：border-image-source(图片路径url（）) border-image-slice（上下左右侧内偏移量）/ border-image-width（边框宽度）/border-image-outset（边框背景向盒外部延伸距离） border-image-repeat（平铺方式<repeat、stretch>）

2、边框属性

1) 内边框 (padding复合属性)

（padding-top、padding-right、padding-bottom、padding-left）

padding：上内边距右内边距下内边距左右边距 <auto:自动（默认值）>

2) 外边距 (margin复合属性)

阅读全文

0 0