CSS 循序渐进

网页装修大法好！！！持续更新

CSS的引用方式

法一：

<link rel="stylesheet" herf="xxx" type="text/css">

法二：

<style>

<style>

法三：

<h1 style="" ></h1>

法四

一个css样式依赖其他文件，后者在style标签中使用。可以将css分块，使结构变得清晰

@import url("css文件路径")

选择器

通配符选择器

*{

}

标签选择器

//并列
h1,h2{

}

//子代
h1 h2{

}

类选择器

.类名 {

}
//单一使用
<div class="类名"></div>
//多样式使用
<div class="类名1 类名2 类名3 ..."></div>

id选择器

常用于js的逻辑中，id是唯一的，不建议使用

#id名 {

}
//使用
<div id="id名字"></div>

结构选择器

后代选择器

//只有h1 下面的 h2 中的 h3剩生效，子孙辈都生效
h1 h2 h3{

}

子元素选择器

//只有h1下面的h2中的h3生效，子代生效，孙辈不生效
h1 h2>h3{

}

兄弟选择器

//h1的兄弟h2生效
h1~h2{

}

//紧挨着h1的h2生效
h1+h2{

}

属性选择器

仅仅只有属性的

//单个属性
h1[title]{

}
//使用
<h1 title></h1>

//多个属性
h1[title][id]{

}
//使用
<h1 title id></h1>

包含属性值的

//属性值选择
h1[title=“xxx”]{

}
//使用
<h1 title="xxx"></h1>

//以xxx开始的
h1[title^=“xxx”]{

}
//使用
<h1 title="xxx"></h1>
<h1 title="xxxyyyyyy"></h1>

//以xxx结束的
h1[title$=“xxx”]{

}
//使用
<h1 title="xxx"></h1>
<h1 title="yyyyyyxxx"></h1>

//包含xxx的
h1[title*=“xxx”]{

}
//使用
<h1 title="xxx"></h1>
<h1 title="yyyyyyxxx"></h1>

//里面有某个单词
h1[title~=“xxx”]{

}
//使用
<h1 title="xxx"></h1>
<h1 title="yyy xxx yyy"></h1>

//以xxx开始，或者以xxx开始后面有-链接的
h1[title|=“xxx”]{

}
//使用
<h1 title="xxx"></h1>
<h1 title="xxx-yyy"></h1>

伪类选择器

对元素的不同状态或者不存在的元素进行设置

:link 默认样式

:visited 使用之后的样式

:hover 鼠标移动上去的样式

:active 鼠标点击的样式

:focus 获取焦点

可以用于输入框

例如 ：最常用的a标签

a:link{
	color :red;
}
a:visited{
	color:yellow;
}
a:hover{
	color:green;
}
a:active{
	color:black;
}
input:focus{
//获取焦点时无外边框
	outlin:none
}

:target 目标伪类选择器

可以用于锚点

div:target{
	color:red;
}

//使用
<a herf="#xxx">xxxx</a>
<div id="xxx">yyyy</div>

:root 根元素

//一下两个相同
:root{
}

html{
}

:empty 空内容

:empty{
	display:none;
}
//使用
<li>xxx<li> //css 不生效
<li></li> //css 生效

结构伪类选择器

注意，结构伪类选择器与标签之间有空格

:first-child

某标签下第一个元素

ul :first-child{
	color:red
}
<ul>
     <li>xxx</li>
     <li>xxxxx</li>
 </ul>

:first-of-type

某标签下的按类型选择第一个元素

//ul标签下第一个h1标签
  ul h1:first-of-type{
       color: brown;
   }
<ul>
     <li>xxx</li>
     <h1>yyyy</h1>
     <li>xxxxx</li>
 </ul>

:last-child

某标签下的最后一个元素

//选择ul中最后一个元素
 ul :last-child{
     color: brown;
 }
 <ul>
     <li>xxx</li>
     <h1>yyyy</h1>
     <li>xxxxx</li>
 </ul>

//限制类型，选择ul中最后一个元素，且元素为h2
 ul h2:last-child{
     color: brown;
 }
 //无人生效
 <ul>
     <li>xxx</li>
     <h2>yyyy</h2>
     <li>xxxxx</li>
 </ul>

:only-child

唯一子元素选择器，只有一个孩子的元素被选中

ul :only-child{
       color: brown;
 }
//再加一个li是不会生效的
<ul>
    <li>xxx</li>
</ul>  

根据元素编号选择元素

:nth-child(n)

//子代中第n个元素 n从0开始
even 偶数
odd 奇数
n 表示全部
2n 表示偶数
2n-1 表示奇数

 ul :nth-child(3){
   color: brown;
 }

<ul>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ul>

:nth-of-type(n)

子代 某类型中的第几个 从第一个开始

  ul h1:nth-of-type(3){
   color: brown;
  }

	<ul>
        <li>xxx</li>
        <li>xxx</li>
        <h1>yyy</h1>
        <h1>yyy</h1>
        <li>xxx</li>
        <h1>yyy</h1>
        <h1>yyy</h1>
    </ul>

:nth-last-child(n)

从最后一个开始取，根:nth-child(n) 一样

:nth-last-of-type(n)

子代 某类型中的第几个 从最后一个开始

排除选择器

:not

//选择前三个，排除第二个
 ul :nth-child(-n+3):not(:nth-child(2)){
  	color: brown;
 }
 
 <ul>
     <li>xxx</li>
     <li>xxx</li>
     <li>xxx</li>
     
 </ul>

表单伪类选择器

/* 禁用的输入框 */
input:disabled{
    background-color: aqua;
}
/* 可以用的输入框 */
input:enabled{
    background-color: brown;
}
/* 设置被选中的紧挨着的label */
input:checked+label{
    color: chartreuse;
}
/* 必须填写的 */
input:required{
    background-color: red;
}
/* 非必须填写的 */
/* input:optional{
    
} */
/* 有效 */
/* input:valid{
    
} */
/* 无效 */
/* input:invalid{
    
} */


<form action="">
  <input type="text" >
  <input type="text" disabled>
  <hr>
  <input type="radio" checked name="sex">
  <label for="boy">男</label>
  <input type="radio" name="sex">
  <label for="girl">女</label>
  <hr>
  <input type="text" required>
 </form>

文本伪类操作

::first-letter

某文本的第一个字

::first-line

某文本的第一行

::after

在某文本之后增加

::before

在某文本之前增加

权重

---

id 权重位：100
class，类属性值 权重位 ：10
标签、伪元素：1
* 权重位：0
行内样式：1000

---

权重位大的覆盖权重位小的

权重的计算

1 + 10 + 10 = 21
body .content[title]

强制提升权重

从20提升到最高
.content[title]{
	color :red !important
}

元素的继承权重

继承是没有权重的，是无 NULL不是0

---

子元素定义具体规则之后，父元素的规则会失效

---

有一些元素是不会继承的，如边框等

---

通配符的权重是 0 > 无NULL（继承）

文本CSS样式属性

字体

1. font-family 属性，一次会赋值多个字体，防止客户电脑上没有该字体
2. 自定义字体

@font-face{
	font-family:""; //自定义字体名字
	src:url("xxx.otf") format("opentype"); //路径,字体类型
}

//定义之后就可以用 font-family 来使用了

字体类型有：
*.otf -> opentype
*.woff -> woff
*.ttf -> truetype

字重、字号

1. font-weight:normal;
   normal 正常、bload 加粗、也建议用数字400是normal
2. font-size:100px;
   字号、百分比也可以 1em = 100% 倍数

颜色、行高

• color: ;
  可以用字符串、也可以用16进制、rgb(255,0,0)、rgba(255,255,255,0.5)
• line-height:;
  em、px等单位都是可以的，根据字的大小（font-size）来设置行高

组合定义与倾斜风格

• font-style:italic; 倾斜 normal 正常
• font:加粗、倾斜、大小/行高、字体

字符大小写的几种方式

1. font-variant:small-caps;//小型的大写
2. text-transform:capitalize;//首字母大写等

文本线条的控制

1. 删除线：text-decoration:line-through;
2. 超链接去除下划线：text-decoration:none;

文本阴影

1. text-shadow ：颜色 x偏移量 y偏移 模糊量

文本空白与输出

1.在html中有的时候我们想让我们的文字原封不动的显示在界面上，除了使用html中的<pre>标签之外，也可以使用css的
with-space:pre、
with-space:pre-warp、
with-space:pre-line 属性
2.禁止换行，让文本溢出
with-space:nowrap,
配合overflow：hidden 可以截断溢出内容，
text-overflow可以告诉用户，后面还有更多内容

文本缩进与对其

1.text-indent:40px;缩进，建议使用em单位
2.text-align:center;//文本剧中对齐等
3.竖直对其：vertical-align:middle;等，居中对齐，也可以用正负像素

字符间距，排版

1.letter-spacing:20px;字母间距
2.word-spacing:20px;单词间距
3.writing-mode：vertical-rl;排版从左到右等，盘本模式

盒子模型

总体把控

.out{
    border: solid 2px black;
}
.in{
 border: solid 2px red;
}
<div class="out">
    <div class="in">盒子</div>
</div>

如果想让两个盒子分开，可以让外边盒子加内边距padding，也可以让里边的盒子加外边距margin

.out{
    border: solid 2px black;
    padding: 20px;
}
.in{
 border: solid 2px red;
}
<div class="out">
    <div class="in">盒子</div>
</div>

细致把控

四周

.out{
    border: solid 2px black;
    padding: 20px 30px 10px 5px;
    		 上     右   下   左
}  
.in{
 border: solid 2px red;
}
<div class="out">
    <div class="in">盒子</div>
</div>

margin水平居中

当父标签与子标签都设置宽、的时候，才有横向居中

.out{
    border: solid 2px black;
    width: 400px; //必须有
}
.in{
    width: 100px;//必须有
    border: solid 2px red;
    margin: auto;
}
<div class="out">
    <div class="in">盒子</div>
</div>

任何一个标签没有具体的宽度或者高度，都无法达到居中的效果，因为块级元素默认是占满一行的

margin竖直边距合并

.div1{
    border: solid 2px black;
    height: 80px;
    margin-bottom: 90px;
}

.div2{
    border: solid 2px black;
    height: 80px;
    margin-top: 50px;
}
 <div class="div1">盒子1</div>
 <div class="div2">盒子2</div>

两个竖直的盒子上下排列在一起时，且双方都与对方有margin，那么系统会取他们之间最大的margin值作为他们之间的外边距

盒子尺寸与内边距

原来的尺寸：

.div{
    border: solid 2px black;
    height: 100px;
    width: 100px;
}
<div class="div">盒子</div>

加了padding之后

  .div{
    border: solid 2px black;
    height: 100px;
    width: 100px;
    padding: 50px;
}
<div class="div">盒子</div>

如果想固定盒子的尺寸，不随着padding变化，可以添加box-size属性

.div{
    border: solid 2px black;
    height: 100px;
    width: 100px;
    padding: 50px;
    box-sizing: border-box;
}
 <div class="div">盒子</div>

边框的使用

直角

.div{
  width: 100px;
  border-style: groove;/*立体感觉 也可以每个边也定义独立样式*/
  border-width:20px ;/*边框宽度*/
  border-color: aqua;/*边框颜色*/
  border:groove 20px aqua;/*组合写法*/
}
 <div class="div">盒子</div>

圆角的使用

不仅可以在块元素上，也可在行元素上使用

.div{
   width: 100px;
   height: 100px;
   border: solid 2px red;
   border-radius: 10px; /*也可以用百分比*/
}
<div class="div">盒子</div>

轮廓线

轮廓线跟边框很像，唯一的缺点就是不占用空间位

 *{
    margin: 0;
    padding: 0;
}
.div{
   width: 100px;
   height: 100px;
   outline: groove 20px red;
}
<div class="div">轮廓线</div>
<h2>上边是轮廓线</h2>

元素显示的模式

• display:none; 元素消失
• display:block; 元素转换为块级元素
• display:inline; 元素转换为行级元素
• display:inline-blick; 行级块元素，相较于inliine此模式可以设置宽、高

cursor:pointer; 鼠标形状改变

• display:none; 与 visibility:hidden的区别

 .out{
    width: 200px;
    height: 300px;
    border: solid 2px black;
    padding: 10px;
}
.div{
   width: 100px;
   height: 100px;
   background-color: blue;
   margin-bottom: 10px;
}
div :nth-child(1){
    display: none;
   /*visibility: hidden;*/
}
<div class="out">
    <div class="div">模块1</div>
    <div class="div">模块2</div>
</div>

display则没有占位置而visiblity（opacity:0;也可以有这样的效果）是占了一个位置

overflow溢出隐藏

当我们的文本超过指定的边框的大小时，默认时不隐藏的

当设置overflow为auto时，则是超出部分则会出现滚动条，且滚动条时不会消失的
当我们的overflow设置为hidden时，多余的部分会隐藏
配合withte-space:nowrap 与 text-overflow:ellipsis
会出现三个小点的样式

css的尺寸控制

• width:普通宽
• height:普通高
• min-width:最小的宽度
• min-height:最小的高度 内容小于该高度则取此值
• max-width:最大的宽度
• max-height:最大的高度 内容大于这个高度取此值
• 图片或者文章最好不要用width与height设置死了，最好用min或者max约定一个范围，而且min与max最好可以用百分比赋值

css中尺寸

	一般浏览器默认字体大小为16px 也有14px的
px	绝对单位，页面按照精确的像素展示，对于ctrl + 滚轮是没有作用的
em	相对单位，基准为font-size，或者父级元素
rem	相对于根节点html字体大小计算，既可以说是相对单位也可以说是 绝对单位，适合适配移动端口，rem对于em可以说是取值较为稳定
vw	viewpoint width,视窗宽度（桌面端为可视窗口，移动端 Layout Viewport布局视口，“☞”Visual Viewport视觉视口，Ideal Viewport理想视口），1vw等于1%视窗宽度，使用于移动端适配，对浏览器版本要求较高
vh	viewpoint height 视窗宽度，1vh等于1%视窗高度，使用于移动端，同vw
vmin	vw 与 vh 中较小的哪一个
vmax	vw 与 vh 中较大的哪一个
%	百分比
in	寸 1in = 2.54cm
mm	毫米
pt	1/72寸 1pt = 4/3 px 绝对单位在文字排版工具中是非常重要的，如word、adboe等，印刷排版中用
pc	1/6寸 1pc = 12点活字
ex	取当前作用效果的字母的x的高度