CSS

CSS层叠样式表

一、css的语法

什么是css？

层叠样式表
命名规则：

使用字母、数字或下划线和减号构成，不要以数字开头
格式：

选择器{属性:值;属性:值;属性:值;....}

其中选择器也叫选择符
CSS中注释
```
/* ... */
```

二、在HTML中如何使用css样式（html中嵌入css的方式）

1、内联方式（行内样式）

就是在HTML的标签中使用style属性来设置css样式
格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
特点：仅作用于本标签

2、内部方式（内嵌样式）

就是在head标签中使用<style type="text/css">....</style>标签来设置css样式
格式：

 <style type="text/css">
    ....css样式代码
 </style>

特点：作用于当前整个页面

3、外部导入方式（外部链入）

3.1 （推荐）就是在head标签中使用`<link/>`标签导入一个css文件，在作用于本页面，实现css样式设置

格式：

<link href="文件名.css" type="text/css" rel="stylesheet"/>

3.2 还可以使用import在style标签中导入css文件。

格式:

<style type="text/css">
    @import "style.css";
</style>

特点：作用于整个网站

4、俩种导入方式的区别:

link属于html，而@import则属于css

@import 不能写在内嵌样式的上方否则样式无效

格式：

不生效
 <style type="text/css">
     div{
         width:200px;
     }
     @import '1.css'
 </style>
 下面的写法生效
 <style type="text/css">
 div{
     width:200px;
 }
 </style>
 <style type="text/css">
     @import '1.css'
 </style>

加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

他们的优先级：当样式冲突时，就是采用就近原则，是值css属性离被修饰的内容最近的为主。

若没有样式冲突则采用叠加效果。

三、**css2的选择符：

1、html选择符（标签选择器）

就是把html标签作为选择符使用
如 p{....} 网页中所有p标签采用此样式

h2{....}  网页中所有h2标签采用此样式

2、class类选择符 (使用点.将自定义名（类名）来定义的选择符)（类选择器P）

定义： .类名{样式....} 匿名类

其他选择符名.类名{样式....}
使用：<html标签 class="类名">...</html标签>

.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */

p .ps{color:green;} /只有p标签中class属性值为ps的才采用此样式/

注意：类选择符可以在网页中重复使用

3、Id选择符(ID选择器)

定义： #id名{样式.....}
使用：<html标签 id="id名">...</html标签>

注意：id选择符只在网页中使用一次

选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]

4、关联选择符（包含选择符）

格式：选择符1 选择符2 选择符3 ...{样式....}
例如： table a{....} /*table标签里的a标签才采用此样式*/

h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/

5、组合选择符（选择符组）

格式：选择符1,选择符2,选择符3 ...{样式....}

h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/

6、*通配符（全局选择器）

说明：

通配符的写法是“*”，其含义就是所有元素。

用法：

常用来重置样式

*{ padding:0; margin:0;}

7、伪类选(伪元素)择符：

格式：标签名:伪类名{样式....}

 a:link {color: #FF0000; text-decoration: none}         /* 未访问的链接 */

 a:visited {color: #00FF00; text-decoration: none}      /* 已访问的链接 */

 a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */

 a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；

例如：

a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变颜色。

伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态

8、属性选择器：

...

9、其他伪类选择器

...

优先级:行内->css3选择器->id->class->html->html属性

四、 CSS3中的选择器

关系选择器：

div>p 选择所有作为div元素的子元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后面的所有兄弟元素p

属性选择器：

[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。
[attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表，其中一个等于value的元素。
[attribute|=value]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

div[class|="a"]    class="a-test"

[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素
[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素
[attribute*=value]匹配具有attribute属性、且值中含有value的E元素
浏览器兼容性问题：
不用担心浏览器兼容问题，也不用考虑IE浏览器版本问题。

CSS 伪类用于向某些选择器添加特殊的效果。

结构性伪类选择器：

伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。

::first-letter设置对象内的第一个字符的样式。
::first-line设置对象内的第一行的样式。
:before设置在对象前（依据对象树的逻辑结构）发生的内容。
:after设置在对象后（依据对象树的逻辑结构）发生的内容。

span:before{
    content: '必须存在的属性';
    display: block;
    border:1px solid red;
}
span:after{
    content: '必须存在的属性';
    display: block;
    border:1px solid red;
}

:lang(language)匹配使用特殊语言的E元素。

:first-of-type匹配同类型中的第一个同级兄弟元素
:last-of-type匹配同类型中的最后一个同级兄弟元素表示其父元素下的最后一个指定类型的元素。

:only-of-type匹配同类型中的唯一的一个同级兄弟元素

:only-child匹配父元素仅有的一个子元素

:first-child()匹配父元素的最后一个子元素
:last-child()匹配父元素的最后一个子元素其父元素的最后一个子元素，且这个元素是css指定的元素，才可以生效

:nth-child(n)匹配父元素的第n个子元素

:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素

实例：

li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */

child和type区别:

child所指定的必须为第一个或者最后一个否则不生效但是type可以

:root匹配元素在文档的根元素。在HTML中，根元素永远是HTML
:empty匹配没有任何子元素（包括text节点）的元素
:not(selector)匹配不含有selector选择符的元素

.demo li:not(:last-child) {
   border-bottom: 1px solid #ddd;
}
上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线

*状态伪类选择器

:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
*:hover 设置元素在其鼠标悬停时的样式
*:focus 设置元素在其获取焦点时的样式
:target 匹配相关URL指向的E元素将锚点跳转的代码进行设置

#my_md:target{}

:enabled 匹配用户界面上处于可用状态的元素
:disabled 匹配用户界面上处于禁用状态的元素
:checked 匹配用户界面上处于选中状态的元素

实例：

input:checked + span {
   background: #f00;
}
<input type="radio"><span></span>
input:checked + span:after {
   content: " 我被选中了";
}
<input type="radio" name="colour-group" value="0" /><span></span>

::selection 设置对象被选择时的样式

实例：

p::selection{background:#000;color:#f00;}
<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。

5.!important 应用优先权

.test {important
color: #f00 !important;
color: #000;
}

伪类就是创建了一个假的类名；伪元素就是创建了一个假的元素标签。

同样举例说明伪元素（就是创建了假的元素）：如让<p>啊啦啦啦</p>里面的啊变颜色
我们的一般做法是<p><span>啊</span>啦啦啦</p>然后span{color:red}
但是用伪元素就不用创建新元素span了,直接p::first-letter{color:red}就可以搞定了是不是很爽啊，相当于创建了一个假的元素span然而实际并没有创建

======================================================================================

五、CSS中常用的属性：

1、color颜色属性：

A. color 英文单词

{color:red;}

B. 十六进制

{color:#00FF00;}

C. HSL颜色: 通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色.

background-color: hsl(240,100%,50%);color:white；

D. HSLA颜色: 色调(H)、饱和度(S)、亮度(L)、透明度(A)；

background-color: hsla(0,100%,50%,0.2);

*E. RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化

background-color: rgba(200,100,0);

F. RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A)

background-color: rgba(0,0,0,0.5);

*G. 图片透明度的设置 img.opacity{ opacity:0.25;}

兼容IE8 filter:alpha(opacity=100);

2、字体属性： font

font
*font-size: 字体大小：20px，60%基于父对象的百分比取值
*font-family：字体：宋体，Arial
font-style： normal正常；italic斜体； oblique倾斜的字体
*font-weight：字体加粗：bold
font-variant: small-caps 小型的大写字母字体
font-stretch: [了解]文字的拉伸是相对于浏览器显示的字体的正常宽度（大部分浏览器不支持）。

<' font-style '>：指定文本字体样式
<' font-variant '>：指定文本是否为小型的大写字母
<' font-weight '>：指定文本字体的粗细
<' font-size '>：指定文本字体尺寸
<' line-height '>：指定文本字体的行高 tvls
<' font-family '>：指定文本使用某个字体或字体序列
且font-size和font-family是不可忽略

3、文本属性：

text-indent: 首行缩进：2em text-indent:30px;
text-overflow：文本的溢出是否使用省略标记（...）。clip|ellipsis（显示省略标记）
*text-align: 文本的位置：left center right
text-transform：对象中的文本的大小写：capitalize(首字母)|uppercase大写|lowercase小写
*text-decoration: 字体画线：none无、underline下画线，line-through贯穿线
text-decoration-line：[了解]文本装饰线条的位置（浏览器不兼容）

*text-shadow: 文本的文字是否有阴影及模糊效果
vertical-align: 文本的垂直对齐方式 middle居中
direction：文字流方向。ltr | rtl

white-space:nowrap; /* 强制在同一行内显示所有文本*/

*letter-spacing: 文字或字母的间距
word-spacing：单词间距
*line-height：行高
*color：字体颜色
word-break:break-all;单词换行

4、*边框：

border:宽度 样式 颜色;
border-color;
border-style; 边框样式：solid实现，dotted点状线，dashed虚线
border-width:
border-left-color;
border-left-style;
border-left-width:
...
CSS3的样式
border-radius：圆角处理
box-shadow: 设置或检索对象阴影
三角
div{
    border: 14px solid #FFF;
    width:0;
    height: 0;
    border-bottom-color:red;
}

5、背景属性：background

*background-color: 背景颜色
*background-image: 背景图片
*background-repeat：是否重复，如何重复?(平铺)
*background-position：定位

center：背景图像横向和纵向居中。
left：背景图像在横向上填充从左边开始。
right：背景图像在横向上填充从右边开始。
top：背景图像在纵向上填充从顶部开始。
bottom：背景图像在纵向上填充从底部开始。

background-attachment：[əˈtætʃmənt] 是否固定背景，

scroll:默认值。背景图像是随对象内容滚动
fixed:背景图像固定

css3的属性

*background-size: 背景大小，如 background-size:100px 140px;
多层背景：
background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-size:50px 60px,50px 60px,50px 60px;

6、*内补白（内补丁）

padding：检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top：检索或设置对象顶边的内部边距
padding-right：检索或设置对象右边的内部边距
padding-bottom：检索或设置对象下边的内部边距
padding-left：检索或设置对象左边的内部边距
box-sizing: border-box;

7、*外补白（外补丁）

margin：检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
margin-top：检索或设置对象顶边的外延边距
margin-right：检索或设置对象右边的外延边距
margin-bottom：检索或设置对象下b边的外延边距
margin-left：检索或设置对象左边的外延边距

8、Position定位

*position: 定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）
*z-index: 层叠顺序，值越大越在上方。
*top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置
right: 检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置
*left: 检索或设置对象与其最近一个定位的父对象左边相关的位置

设置div相对于浏览器居中显示

position:absolute;
left:0;
top:0;
bottom:0;
right: 0;
margin: auto;

9、Layout布局

    与display属性不同，此属性为隐藏的对象保留其占据的物理空间

clip: 检索或设置对象的可视区域。区域外的部分是透d明的。 rect(上-右-下-左)

    如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.

*overflow: 超出隐藏：hidden，visible：不剪切内容
overflow-x：内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto
overflow-y：内容超过其指定高度时如何管理内容

图片格式（了解）

png 常用的网络传输格式，开发中用的最多的格式 HTML常用，移动开发（Android，IOS，WP）,这个格式文件失真率低支持透明像素，相对来说占用空间比较多
jpg 比较常用的图片格式，压缩性能比较高，不支持透明像素失真率比较高
gif 动态图片，不透明的，占用空间比较高
psd Photoshop的原图，PS超级大，但是可以保留图片原始所有资料
webp Google定义的，它集合了png和jpg的优点支持透明像素，空间占用低

盒子模型

css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框（border)、外边距(margin)、内边距(padding)、内容区(content)。
计算公式：
宽 =左右margin+左右border+左右padding+内容width
高 =上下margin+上下border+上下padding+内容height

怪异盒子模型

/* 切换盒子模型计算方式
 *
 *  从边框左边到边框右边之间的距离  才是width
 *      计算宽度非常方便
 *
 */
box-sizing: border-box;

新增CSS3选择器及属性只需在选择器或属性前加上相对应的浏览器前缀即可

-webkit- Chrome
-moz- FF
-ms- IE
-o- Opera

10、用户界面 User Interface

*cursor 鼠标指针采用何种系统预定义的光标形状。pointer小手，url自定义

zoom 设置或检索对象的缩放比例： normal|5倍|200%百分比
box-sizing 设置或检索对象的盒模型组成模式。content-box | border-box

content-box： padding和border不被包含在定义的width和height之内。
border-box： padding和border被包含在定义的width和height之内。

resize 设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。

none：不允许用户调整元素大小。
both：用户可以调节元素的宽度和高度。
horizontal：用户可以调节元素的宽度
vertical：用户可以调节元素的高度。

outline 复合属性：设置或检索对象外的线条轮廓
outline-width设置或检索对象外的线条轮廓的宽度
outline-style设置或检索对象外的线条轮廓的样式
outline-color设置或检索对象外的线条轮廓的颜色
outline-offset设置或检索对象外的线条轮廓偏移位置的数值
nav-index设置或检索对象的导航顺序。
nav-up设置或检索对象的导航方向。
nav-right设置或检索对象的导航方向。

11、表格相关属性：

table-layout 设置或检索表格的布局算法
border-collapse 设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开 separate | collapse
border-spacing 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距
caption-side 设置或检索表格的caption对象是在表格的那一边 top | right | bottom | left
empty-cells 设置或检索当表格的单元格无内容时，是否显示该单元格的边框 hide | show

12、过渡 Transition:

transition 检索或设置对象变换时的过渡效果
transition-property 检索或设置对象中的参与过渡的属性
transition-duration 检索或设置对象过渡的持续时间
transition-timing-function 检索或设置对象中过渡的类型
transition-delay 检索或设置对象延迟过渡的时间

13、动画 Animation

animation 检索或设置对象所应用的动画特效
animation-name 检索或设置对象所应用的动画名称
animation-duration 检索或设置对象动画的持续时间
animation-timing-function 检索或设置对象动画的过渡类型
animation-delay 检索或设置对象动画延迟的时间
animation-iteration-count 检索或设置对象动画的循环次数
animation-direction 检索或设置对象动画在循环中是否反向运动
animation-play-state 检索或设置对象动画的状态
animation-fill-mode 检索或设置对象动画时间之外的状态

14、2D变换 2D Transform

transform 检索或设置对象的变换
transform-origin 检索或设置对象中的变换所参照的原点

最后编辑于：2021.09.17 18:55:57

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,313评论 6赞 496
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,369评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,916评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,333评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,425评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,481评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,491评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,268评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,719评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,004评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,179评论 1赞 342
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,832评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,510评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,153评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,402评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,045评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,071评论 2赞 352

CSS

CSS层叠样式表

一、css的语法

二、在HTML中如何使用css样式（html中嵌入css的方式）

1、内联方式（行内样式）

2、内部方式（内嵌样式）

3、外部导入方式（外部链入）

3.1 （推荐）就是在head标签中使用<link/>标签导入一个css文件，在作用于本页面，实现css样式设置

3.2 还可以使用import在style标签中导入css文件。

4、俩种导入方式的区别:

三、**css2的选择符：

1、html选择符（标签选择器）

2、class类选择符 (使用点.将自定义名（类名）来定义的选择符)（类选择器P）

3、Id选择符(ID选择器)

4、关联选择符（包含选择符）

5、组合选择符（选择符组）

6、*通配符（全局选择器）

7、伪类选(伪元素)择符：

例如：

8、属性选择器：

9、其他伪类选择器

优先级:行内->css3选择器->id->class->html->html属性

四、 CSS3中的选择器

关系选择器：

属性选择器：

结构性伪类选择器：

child和type区别:

*状态伪类选择器

5.!important 应用优先权

伪类就是创建了一个假的类名；伪元素就是创建了一个假的元素标签。

五、CSS中常用的属性：

1、color颜色属性：

2、字体属性： font

3、文本属性：

4、*边框：

5、背景属性：background

css3的属性

6、*内补白（内补丁）

7、*外补白（外补丁）

8、Position定位

设置div相对于浏览器居中显示

9、Layout布局

盒子模型

怪异盒子模型

新增CSS3选择器及属性只需在选择器或属性前加上相对应的浏览器前缀即可

10、用户界面 User Interface

11、表格相关属性：

12、过渡 Transition:

13、动画 Animation

14、2D变换 2D Transform

推荐阅读更多精彩内容

3.1 （推荐）就是在head标签中使用`<link/>`标签导入一个css文件，在作用于本页面，实现css样式设置