6.1儿童节，继续学习

最新推荐文章于 2024-09-11 20:31:47 发布

咬了蜘蛛侠的小蜘蛛

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量181

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/JS_kill_apple/article/details/106484455

版权

结构（位置）伪类选择器（css3）
:first-child 选取属于其父元素的首个子元素指定选择器
:last-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第n个子元素，不论
:nth-last-child(n) 选择器匹配属于其元素的第n个子元素的每个元素，不论元素类型，从最后一个子元素开始计数
n可以是数字、关键词或公式

css外观属性
color：文本颜色
1、预定义的颜色值，如 red green blue等
2、十六进制，如#FF0000 #FF6600 #29D794
3、RGB代码，如红色rgb（255,0,0）或rgb（100%，0%，0%），取值为0也不能省略%

line-height 行间距
常用的属性单位有三种为px（最常用）；相对值rem；百分比%

text-align 水平对齐方式
用于设置文本内容的水平对齐，可用属性值为 left right center

text-indent 首行缩进
1em就是一个字的宽度，允许使用负值，如果是汉字的段落，1em就是一个汉字的宽度，一般text-indent：2em

letter-spacing 字间距，允许使用负值，默认为normal
word-spacing 单词间距，用于定义英语单词之间的间距，对中文字符无效，允许使用负值，默认为normal
word-spacing和letter-spacing均可对英文进行设置，不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距

word-break 自动换行
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角或连字符处换行

颜色半透明（css3）
color: rgba(r,g,b,a) a是alpha 透明的意思取值范围 0~1 color: rgba(0,0,0,3)

文字阴影（CSS3）
shadow标签
text-shadow: 水平位置垂直位置模糊距离阴影颜色

引入CSS样式表（书写位置）
内部样式表：<head>
   <style type="text/CSS">
       选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
   </style>
</head>
行内式（内联样式）：<标签名 style="属性1:属性值1; 属性2:属性值2;"> 内容 </标签名>
外部样式表（外链式）：<head>
   <link href="css文件的路径" type="text/CSS" rel="stylesheet" />
</head>
link是单标签

标签显示模式（display）
块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度高度对齐等属性常用语网页布局和网页结构的搭建
常见块元素有<h1>~<h6> <p> <div> <ul> <ol> <li>等,其中<div>标签是最典型的块元素
块级元素的特点 :
1. 总是从新行开始
2. 高度行高外边距以及内边距都可以控制
3. 宽度默认是容器的100%
4. 可以容纳内联元素和其他块元素

行内元素 (inline-level)
行内元素(内联元素)不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度高度对齐等属性常用于控制页面中文本的样式
常见的行内元素有<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span> 等其中<span>标签最典型的行内元素
行内元素的特点:
1. 和相邻行内元素在一行
2. 宽高无效但水平方向的padding和margin可以设置垂直方向的无效
3. 默认宽度就是他本是内容的宽度
4. 行内元素只能容纳文本或其他行内元素 (a特殊)

行内块元素(inline-block)
在行内元素中有几个特殊的标签--<img /> <input /> <td> 可以对他们设置宽高和对齐属性有些资料可能会称他们为行内块元素
行内块元素的特点 :
1. 和相邻行内元素(行内块)在一行上但是之间会有空白缝隙
2. 默认宽度就是他们本身内容的宽度
3. 高度行高内外边距可以以控制

标签显示模式转换 display
块转行内 : display: inline;
行内转块 : display: block;
块、行内元素转换为行内块 : display : inline-block;

CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成，目的是为了可以选择更精准更精细的目标元素标签
交集选择器
交集选择器是并且的意思既 ...又...的意思
比如: p.one 选择的是: 类名为 .one 的段落

并集选择器（重点）
各个选择器通过<strong style="color:#0f0">逗号</strong>链接而成任何形式的选择器(包括标签选择器,class类选择器id选择器等),都可以作为并集选择器的一部分
比如 .one,p,#test {color:#foo;}表示 .one p #test 这三个都会执行颜色为红色通常用于集体声明

后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代其写法就是把外层标签写在前面内层标签写在后面中间用空格分隔当标签发生嵌套时内层标签就称为外层标签的后代

子元素选择器
子元素选择器只能选择作为某元素子元素的元素其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接注意符号左右两侧各保留一个空格
比如: .deom > h3 {color: red;} 说明 h3 一定是deoom 亲儿子 demo 包含着h3