CSS笔记

以下选择器引用：写在head内的style内，但最好另外设置.css文件，在head声明后直接引用（这就很专业）。

1、***引入样式***
2、***多种选择器***
W3C全有https://www.w3school.com.cn/cssref/css_selectors.asp
3、***字体属性***
font-family : 字体类型
font-style : 字体风格
font-size : 字体大小
font-weight : 字体粗细
line-height: 行高
等等

p {
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    font-family: '微软雅黑','仿宋';
    line-height: 50px;
}

合并 font: italic bold 30px/50px '仿宋'
weight和style可以交换位置，但
size和family固定位置。
对于font: size和family一定要有，前两个（包括行高）可以不要。

---

在head里的style中打上

p {

color: red;

}

则<p>内的文字都变为红色，例如<p>网站介绍</p>

类选择器：

可以指定某个元素赋予某个颜色等属性，而不是都变为一种颜色。

.red {

color: red;

}

将拥有red类等HTML元素均为红色。

类命名有专业的规则，如导航：nav。

多类名使用：<div class="class1 class2">xxx</div>这里xxx就用了class1和class2两个类选择器。

id选择器

#xxx {

}

<div id="xxx">awdw</div>

如上，只能通过id来调用。

和类选择器区别：（样式用#定义，结构id调用，只能调用一次，别人切勿使用），如这个div的id用了，别的div就不能用。

并集选择器

a,p {
    font-size: 20px;
}

交集选择器
两者同时满足

a.b {
    font-size: 30px;
}

CSS字体属性

格式px，如font-size: 20px;

字体属性有很多，直接去网站搜。

CSS文本属性

color：颜色

text-align：水平对齐（center，left，right）

text-decoration：装饰文本，none，underline(下划线)，overline(上划线)，line-through(删除线)。

text-indent：文本缩近，20px表示首行缩近20个像素，可以-20px；2em表示两个当前文字大小的距离。

line-height：行间距（行高），px。

CSS引入方式

1、内部样式表

在head中放在style中

2、行内样式表

更简单的修改样式，直接在标签内写上style，如<p style="color: pink;">粉红色<p>

3、外部样式表（重点）

单独写个CSS文件，在html页面的head直接引用所需的CSS文件，

1、新建.css文件

2、head上通过link引入。<link rel="stylesheet" href=".css文件路径">

---

优先级：行内样式>内部样式>外部样式（就近原则）
（但<p class="red">在国外</p>）优先显示红色外部样式，而非蓝色内部样式，因为就近原则？）

Emmet语法：

HTML自动补全熟悉点，就不再记录。
ul>ui 补全 即补偿父子关系。

<ur>

​ <ui></ui>

</ur>

在CSS使用：

w100 补全 width: 100px;

tac 补全 text-align: center;

即每个首字母即可补全。

快速格式化：右键Format DOcument

但可以设置自动格式化代码，逐渐变懒（设置完一旦保存就会自动格式化）。

CSS的复合选择器

1、后代选择器

元素1 元素2 { 样式声明 }

这样样式声明只会改动元素2。

例子：

ol li { 
color: red;
}

这样只有ol中的li元素变为红色。

2、子元素选择器

元素1 > 元素2 { 样式声明 }

.nav > a {

​ color: red;

​ }

<div class="nav" >
    <a href="#">我是儿子</a>
    <p>
      <a href="#">我是孙子</a>
    </p>
</div>

这样会把作为儿子的a样式变为红色，孙子a（在div里的p里面）不受影响。

.nav a {

​ color: red;

​ }

<div class="nav" >
    <a href="#">我是儿子</a>
    <p>
      <a href="#">我是孙子</a>
    </p>
</div>

这样所有的a都变红色，不管a在第几层。

3、并集选择器

div, p {
    color="red";
}

这样div和p元素都变为红色，改为相同元素。逗号表示”**和**“的意思。

也可以多个元素：

div,

p,

.pig li {

color=”red”;

}

4、链接伪类选择器

<a 默认链接形式为蓝色带下划线，通过这个可以直接把生成的链接改为所需样式。

1、没点击过的链接调用这个

a:link {
      color: red;
      text-decoration: none;
    }

2、已经点击（访问过的）的链接用这个

a:visited

3、鼠标经过的那个链接

a:hover

4、鼠标正在按下，但还没有点击下去的链接

a:active

5、focus选择器

input:focus {

color="rad";

}

这样点击某个input时，这个input将变为红色，提高用户体验。

6、属性选择器

[title] {
color:red;
}
title属性为例

a[href][title] {
        color:red;
}

这样属性只有href，title两个属性的a才生效。

下面可以
<a title="W3School Home" href="http://w3school.com.cn">W3School</a>
下面不行
<a href="http://w3school.com.cn">W3School</a>

元素显示模式转换

前提：行元素（spean，a等等）不能改变大小，

快元素（div等）

还有行内块元素等。

转换为块元素：display: block

转换为行元素：display:inline

a:link {
      color: red;
      text-decoration: none;
      display: block;
    }

这样将a（行元素）转为块元素，使得链接的长宽可以调整了，因为作为行元素的链接a大小默认不大。

通过上面方法可以实现这种侧边栏效果：

图片

垂直居中

小技巧，css本身没有垂直居中，但可以动过代码来句中。

让行高（line-height）等于盒子高度(heigh)就行。

原理如图，行高包括上空隙、文字本身高度、下空隙。

图片

若行高比盒子高度小则偏上，行高比盒子高度大则偏下，即上空隙永远顶着顶部往下展开。

图片

CSS的背景

1、background-color：

背景颜色

2、background-image：

背景图片，常用于Logo、小装饰图片或者超大图片
小图默认平铺整个背景（repeat）

div{
		width:300px;
		height:300px
		background-image: url(images/logo.png)
} 
//则div背景图片为logo.png
//url也不用引号来包裹图片路径

3、background-repeat：

背景平铺，属性有平铺or不平铺，沿x轴（盒子宽度为数据）平铺or沿y轴（盒子高度为数据）平铺。（图片小的话重复多个来铺满盒子）

4、background-position：

背景位置。重点。通过这个，可以把背景图片logo和文字对齐。

如果直接用img的话，图片可能对不齐文字，所以可以背景图片和背景位置等。

例子background-position: left center;

图片相对盒子向最左靠拢，水平居中，两个属性不分先后顺序。

background-position: 20px 50px;

background-position: 20px center;

图片，如图这个就可以用背景图片和背景位置了。

5、background-attachment：

背景图片随着鼠标或者滚动固定，scroll滚动，fixed固定。

6、背景属性复合写法：

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

例子 background: black url(images/logo.png) no-repeat fixed center top;

后两个center和top是背景图片位置的两个值。

7、背景色半透明：

background: rgba(0, 0, 0, 0.3);

最后一个参数是alpha透明度，范围是0～1。

---

CSS盒子模型

1、边框（border）

border-width: 5px； //边框的粗细

border-style： // solid 实线边框，dashed 虚线边框，dotted 点线边框等等等等。

border-color：//边框的颜色

border复合写法，同时参数顺序不影响，例子

border: 2px solid red;
border-Top: 10px dashed pink;  <!-- 设置上边框 -->

表格的边框也可以通过border来改。

2、内边距（padding）

padding-left: 5px   <!-- 设置左边距 -->

padding复合写法

值的个数	表达意思
padding: 5px;	1个值，代表上下左右都有5px内边距；
padding: 5px 10px;	2个值，代表上下内边距5px，左右内边距10px；
padding: 5px 10px 20px;	3个值，代表上内边距5px，左右内边距10px，下内边距20px；
padding: 5px 10px 20px 30px;	4个值，顺时针，上5px，右10px，下20px，左30px；

加了内边距后盒子也会变大，即内边距撑开了盒子，所以要使盒子大小不变，可以让盒子长宽（width/height）减去内边距。

应用场景：顶部导航栏，不用padding，不同字数用同一大小的盒子，字数少的空隙很多，这时用paddding就可以撑开同样大小的空隙（即字数不同有着同样的空隙）。

3、外边距（margin）

两盒子之间的距离。

让块级盒子水平居中：盒子指定width，左右外边距设置为auto

width: 90px;
margin:0 auto;  /* 上下没有外边距，左右外边距auto */

外边距合并：嵌套块元素塌陷

两个嵌套关系（父子关系）的块元素，父元素已有上外边距，本想给子元素设置上外边距，让子元素向下移，结果父元素也会跟着塌陷下来。

解决方法：

1、给父元素设置个上边框（可以设置为透明的）。

2、给父元素设置个上内边距。

3、给父元素添加overflow:hidden（这个不会让盒子增大）

4、清除内外边距

默认会自带外边距等不同的边距，下面代码自动适用所有元素，出生都不带内外边距了，方便布局。

* {
      padding: 0;  /* 清除内边距 */
      margin: 0;   /* 清除外边距 */
    }

边距综合案例：

图片

CSS3圆角边框

border-radius: 10px;
border-radius: 50%;   /* 这样变成圆形 */

盒子阴影

值	描述
H-shadow	**必需**。水平阴影的位置，允许负值。
V-shadow	**必需**。垂直阴影的位置，允许负值。
Blur	可选。模糊程度，0就是纯实。
Spread	可选。阴影尺寸，
Color	可选。阴影的颜色。一般用rgba(0, 0, 0, 0.3) 半透明
Inset	可选。将外部阴影改为内部阴影。

box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3) a;

外 xx定位，内 相对定位。
块状元素可以包含内联元素，反过来不行。
块状元素和内联元素可以转换，所以<a不一定是内联元素！