1. 学习CSS的基础

1.1 定制软件基本语法规范

每个CSS定制软件语法包含两个部分：选择器+定制软件应用的属性

1.2 引入方式

（1）定制软件内部样式表

通过style标签，来写CSS

定制软件这种方法不太常见，定制软件如果是比较简单的CSS，定制软件这样写也可以

（2）内联样式

通过html标签中的style属性，定制软件来应用一些样式

定制软件内联样式是一种比较特殊的用法（定制软件通常会搭配JS来使用）

定制软件这种写法适合于样式特定制软件别简单的情况（定制软件如果样式比较复杂，定制软件这就会很乱）

定制软件两种写法都可以

定制软件内联样式只是针对当前元素生效（定制软件可以不写选择器，也不用写{}，直接写CSS定制软件属性和值就可以了）

（3）外部样式（使用最多）

把css定制软件代码单独提取出来，放到一个.css文件中

然后在html代码中，通过link标签，来引入该css文件（一般link标签放在head中）

定制软件这种方法好处是，定制软件可以让多个HTML，定制软件复用同一份样式

定制软件打开开发者工具，定制软件也可以看到对应css信息

2. 选择器

2.1 定制软件定制软件选择器的功能和种类

选择器的功能：定制软件就是选中页面的元素（标签）

定制软件可以一次选择一个，定制软件也可以一次选择全部

定制软件选择器的种类：

（1）定制软件基础选择器：定制软件单个选择器构成的

定制软件标签选择器、类选择器、id选择器、定制软件通配符选择器

（2）定制软件复合选择器：定制软件把多种基础选择器综合起来

定制软件后代选择器、子选择器、定制软件并集选择器。伪类选择器

2.2 基础选择器

（1）标签选择器

写的选择器，就是html的标签名

能快速为同一类型的标签都选择出来. ，但是不能差异化选择

（2）类选择器

在CSS代码中，创建一个类名，在对应的html元素中，通过class属性来引用这个类名

此时具有该类名的元素，就都会应用上相关的CSS属性

好处是可以表示不同的标签，也可以让多个标签的都使用同一个样式

一个类可以被多个标签使用，一个标签也可以使用多个类（中间用空格分开）

（3）id选择器

id选择器和类选择器类似，不同的一点是id选择器是在一个页面必须唯一不能重复

CSS 中使用 # 开头表示 id 选择器，html 的元素 id 不必带 #

（4）通配符选择器

* 直接选中页面上的所有元素

这个通配符选择器，最大的用途就是取消浏览器的默认样式

因为不同的浏览器，默认的样式是不同的，在实际开发时，要求页面不依赖默认样式

所以需要使用通配符选择器

2.3 复合选择器

2.3.1 后代选择器

通过多个选择器的组合，能够选中某个元素里面的子元素或后代元素

选择器1和2中间必须加空格，选择器1和2都可以是任意选择器


选择器1 选择器2 {
 
}

2.3.2 子选择器

通过多个选择器的组合，能够选中某个元素里面的子元素

注意：用大于号分割，只选亲儿子

下面来看一下后代选择器和子选择器的区别

2.3.3 并集选择器

并列的写多个选择器，中间用逗号来分割

但是有些特殊情况下，子选择器并列，也会影响到后代元素，比如

想color，font相关的这种会被子元素继承，但还是有些子元素不会别继承，没有什么规律

2.3.4 伪类选择器

（1）链接伪类选择器

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接(鼠标按下了但是未弹起)

（2）.force伪类选择器

选取获取焦点的 input 表单元素.

3. 常用元素属性

3.1 字体属性

（1）字体样式：font-family

（2）字体大小：font-size

（3）字体粗细：font-weight

（4）字体样式：font-style

（1）设置字体

font-family

多个字体之间注意使用逗号分割，如果都找不到，使用默认字体

注意字体带上引号，最好使用常见字体


<body>
    <style>
        .one {
            font-family: '微软雅黑';
        }
        .two {
            font-family: '宋体';
        }
    </style>
    <div class="one">
        正在学习CSS
    </div>
    <div class="two">
        还在学习CSS
    </div>
</body>

（2）大小

font-size 加上px


<body>
    <style>
        .one {
            font-size: 20px;
        }
        .two {
            font-size: 30px;
        }
    </style>
    <div class="one">
        正在学习CSS
    </div>
    <div class="two">
        还在学习CSS
    </div>
</body>
</html>

（3）粗细

font-weight 只能是100的整数，不带px

可以使用数字表示粗细，也可以使用单词表示

normal（400）默认值； bold（700）粗体字符

bolder 更粗字符； lighter：更细字符


<body>
    <style>
        /* 设置字体粗细 */
        .one {
            font-weight: 900;
        }
        .two {
            font-weight: 100;
        }
    </style>
    <div class="one">
        正在学习CSS
    </div>
    <div class="two">
        还在学习CSS
    </div>
</body>

（4）文字样式

font-style 设置文字倾斜/带下划线...

font-style: normal 恢复为默认文字样式

3.2 文本属性

（1）文本颜色：color：rgb

（2）文本对齐：text-align （left、center 、right）

（3）文本装饰：text-decoration （默认、倾斜、删除..）

（4）文本缩进：text-indent （px、em）

（5）行高：line-height （水平居中：text-align；垂直居中：line-height）

（1）文本颜色

color 取值方式有很多种

（1）直接取单词（比较有限）

（2）使用rgb(三原色方式)方式来表示

color: rgb(255, 0, 0) 括号中表示3原色红绿蓝 0-255 255就是最亮的

（3）还是使用rgb，但是使用十六进制的风格表示，比如 #00ff00

也可以缩写（00ff00缩写为0f0，11ff66缩写为1f6；必须都一样才可以缩写）

（4）rgba多个分量，alpha表示透明度


<body>
    <style>
        div {
            color: red;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

（2）文本对齐

text-align

有三种，靠左：left 居中：center 靠右：right

（3）文本装饰

text-decoration: [值];

underline 下划线. [常用]

none 啥都没有. 可以给 a 标签去掉下划线.

overline 上划线. [不常用]

line-through 删除线 [不常用]

去掉a标签超链接的下划线


<body>
    <style>
        a {
            text-decoration: none;
        }
    </style>
    <a href="#">这是超链接</a>
</body>

给一段话加上下划线


<body>
    <style>
        div {
            text-decoration: underline;
        }
    </style>
    <div>这是一句话</div>
</body>

给一段话加上删除线


<body>
    <style>
        div {
            text-decoration: line-through;
        }
    </style>
    <div>这是一句话</div>
</body>

（4）文本缩进

text-indent: [值];

CSS中表示尺寸的单位：

px （像素）

em （相对单位，相对于当前文字大小，

比如当前一个文字大小16px，1em=》16px，2em=》32px）

（5）行高

line-height 行高=字体大小+行间距

设置行高时，会同时对上下两个方向都产生影响

上下两个边距都是均等的，所以也就可以设置垂直居中

水平居中：text-align 垂直居中：line-height


    <style>
        .two {
            line-height: 50px;
        }
    </style>
    <div class="one">
        上一行
    </div>
    <div class="two">
        中间行
    </div>
    <div>
        下一行
    </div>
</body>

因为行高上下均等，所以就可以基于行高实现，垂直方向的文本居中

3.3 背景属性

（1）背景颜色：background-color

（2）背景图片：background-image: url(...);

（3）背景平铺：background-repeat: [平铺方式]

（4）背景位置：background-position: x y （top, left, right, bottom, center）

（5）背景尺寸：background-size: length|percentage|cover|contain;

（1）背景颜色

background-color: [指定颜色] 使用方法和color类似 快速输入（bgc）

（1）英语单词（2）rab （3）#十六进制（4）rgba

默认是 transparent 透明的（应用了父元素的背景）

div标签的父元素是body标签，修改一下


    <style>
        body {
            background-color: rgb(67, 176, 55);
        }
        div {
            width: 200px;
            height: 150px;
            font-size: 20px;
            background-color: brown;
 
            text-align: center;
            line-height: 150px;
        }
    </style>
 
    <div>
        这是一段话
    </div>

（2）背景图片

background-image: url(...);


<body>
    <style>
        div {
            width: 900px;
            height: 500px;
            font-size: 20px;
            background-image: url(风景照.jpg);
            text-align: center;
            line-height: 500px;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

（3）背景平铺

当设置图片背景后，默认是一个平铺的效果（相当于铺地砖，只要有空地，一片接一片）

可以通过这个设置平铺或取消平铺

background-repeat: [平铺方式]

repeat: 平铺

no-repeat: 不平铺

repeat-x: 水平平铺

repeat-y: 垂直平铺


<body>
    <style>
        div {
            width: 900px;
            height: 500px;
            font-size: 20px;
            background-image: url(风景照.jpg);
            background-repeat: repeat;
 
            text-align: center;
            line-height: 500px;
        }
    </style>
 
    <div>
        这是一段话
    </div>
</body>

（4）背景位置

背景图片和背景颜色是可以共存的，背景图会出现在背景颜色的上方

设置背景图的位置：background-position: x y;

参数有三种风格:

1. 方位名词: (top, left, right, bottom, center)

2. 精确单位: 坐标或者百分比(以左上角为原点)

3. 混合单位: 同时包含方位名词和精确单位


<body>
    <style>
        div {
            width: 900px;
            height: 500px;
            font-size: 20px;
            background-image: url(风景照.jpg);
            background-repeat: no-repeat;
            background-position: 100px 100px;
 
            text-align: center;
            line-height: 500px;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

如果只是使用px为单位，并不好实现，让背景图“居中”的效果

还可以设为百分数还可以设为表示位置的英文单词

比如

（5）背景尺寸

background-size: length|percentage|cover|contain;

（1）可以通过px的方式来直接设置背景的宽度和高度

（2）cover和cotain都能让背景图自适应这里的元素大小

不同的是cover不会让元素漏出背景色，使图像完全覆盖背景区域

而cotain可能会漏出一部分背景色，把图片拉伸为元素大小就可以了，保证背景图始终在元素之内

3.4 圆角矩形

（1）基本用法

border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈

（2）生成圆形

border-redius设置为正方形宽度的一半就可以了

可以是px 也可以是百分数 50%

（3）生成圆角矩形

（4）展开写法

border-redius也可以对四个角分别设置


border-radius:2em;
等价于
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;


border-radius: 10px 20px 30px 40px;
等价于（顺时针）
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

4. 元素的显示模式

（1）块级元素

独占一行，可以设置宽度高度

div，h1-h6，p，ul，li，table...

（2）行内元素

不独占一行，不能设置宽度高度 (可以理解成一个文本，最终行内元素的尺寸取决于内部的内容多少)

span，a，em，i....

（3）行内块元素

不独占一行，可以设置宽度高度

input,img...

（4）改变显示模式

通过display来修改元素的显示模式

常见的用法，就是把行内元素给改成块级元素

.

可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.

display: block 改成块级元素 [常用]

display: inline 改成行内元素 [很少用]

display: inline-block 改成行内块元素

display:none（特殊的选项，元素不显示，隐藏元素）

5. 盒模型

每一个 HTML 元素就相当于是一个矩形的 "盒子"

这个盒子由这几个部分构成

边框 border 内容 content 内边距 padding 外边距 margin

打开Chrome开发者工具，可以看到这个盒模型

5.1 边框:border

border: 5px black solid; （无顺序要求）

box-sizing: border-box;

可以改四个方向的任意边框.

border-top/bottom/left/right

.solid 实线边框 dashed 虚线边框 dotted 点线边框

直接设置border会撑大原有的属性

这样可能会导致比如，页面宽度300px，要放3个100px的照片，刚好可以占满，但给图片加边框后，就可能会导致最后一个图片放不下了

所以，实际在使用时，是设置box-sizing：border-box

此时设置的边框就会挤压内容，而不是撑大元素

5.2 内边距：padding

padding 设置内容和边框之间的距离

默认内容是顶着边框来放置的. 用 padding 来控制这个距离

可以给四个方向都加上边距

padding-top padding-bottom

padding-left padding-right

也可以简写 padding: 上右下左 ;

padding默认情况下，也会撑大元素

通过box-sizing为border-box就可以阻止盒子被撑大了

5.3 外边距:margin

控制盒子和盒子之间的距离.

可以给四个方向都加上边距

margin-top margin-bottom

margin-left margin-right

也可以简写 margin: 上右下左 ;

外边距margin在垂直方向上会存在
“塌陷”情况，两个元素都设置了外边距的时候，实际的外边距是两者较大值，而不是相加
在水平方向不会出现（直接相加）

5.4 块级元素的水平居中

基于 margin 可以实现一个元素的水平居中（不是文本的水平居中）

文本的水平居中：text-align:center

文本的垂直居中：line-heigh：【height】

元素的水平居中，就可以使用margin，前提是块级元素

把水平 margin 设为 auto

把水平方向的外边距设为auto（浏览器自适应）就会达到水平居中的效果

6. 去除浏览器默认样式


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

7. 弹性布局

7.1 弹性布局：flex

主要是安排页面上的元素位置（排列方式）

前面的属性，大多都是针对一个元素本身进行设置的

但是还有些元素，是影响的元素和元素之间的

比如盒子模型中的外边距就是一部分

弹性布局就是，强调这一点的，默认的网页布局是从上到下的（块级元素），而在实际我们看到的网页中不仅有从上到下，也有从左到右

弹性布局：display：flex

div块级元素，使用后独占一行

给父元素设置一个属性，让弹性布局：display：flex；就可以放到一行中了

7.2 水平方向的排列方式：justify-content

前面通过弹性布局display：flex，将块级元素调整的水平方向上了

默认这些元素都挤在左上角的，现在可以通过

justify-content 进行水平方向的排列（设置主轴上的子元素排列方式）

值	描述
flex-start	默认值，靠左排列
flext-end	靠右排列
center	位于中间位置
space-between	元素中间有等分间隔
space-aroud	元素中间有等分间隔，最左边和最右边空出来

7.3 垂直方向的排列方式：align-items

align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents

7.4 实现一个简单的页面布局


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
</head>
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        .nav {
            width: 100%;
            height: 50px;
            background-color: rgb(60, 60, 60);
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }
 
        .container {
            width: 100%;
            height: 1000px;
            background-color: grey;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .container .left, .container .right {
            width: 15%;
            height: 100%;
            background-color: rgb(158, 251, 141);
 
            font-size: 20px;
            line-height: 1000px;
            text-align: center;
        }
 
 
        .container .content {
            width: 70%;
            height: 100%;
            background-color: white;
 
            font-size: 20px;
            line-height: 1000px;
            text-align: center;
        }
 
        .footer {
            width: 100%;
            height: 150px;
            background-color: rgb(60, 60, 60);
            color: aqua;
            
            font-size: 20px;
            text-align: center;
            line-height: 150px;
 
        }
    </style>
 
    <div class="nav">
        导航栏
    </div>
 
    <div class="container">
        <div class="left">
            左侧边栏
        </div>
        <div class="content">
            内容区域
        </div>
        <div class="right">
            右侧边栏
        </div>
    </div>
 
    <div class="footer">
        页脚
    </div>
</body>
</html>

定制软件CSS学习笔记