作者：~小明学编程 

文章专栏：JavaEE

格言：热爱编程的，终将被编程所厚爱。

目录

什么是SCC?

引入方式

内部样式表

内联样式

外部样式

代码风格

样式风格

样式大小写

选择器

基础选择器

标签选择器

类选择器

 id选择器

通配符选择器

复合选择器

后代选择器

子选择器

并集选择器

伪类选择器

字体

设置字体

字体大小

字体粗细

字体样式

文本属性

文本颜色

文本对齐

文本装饰

文本缩进

文本行高

背景属性

背景颜色

背景图片

平铺效果

图片位置

图片大小 

圆角矩形

查看CSS属性

元素的显示模式

行内元素

块级元素

隐藏元素

盒子模型

边框

边框样式

内边距 

 外边距

弹性布局

水平方向的排列

垂直方向的排列方式

​编辑实战练习

什么是SCC?

层叠样式表 (Cascading Style Sheets).
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。
HTML 是页面的骨，CSS 就是页面的样式，就是皮，就是描述了任意一个网页的元素：大小、字体、颜色、背景、边框。每一个 CSS 包含两个部分：选择器+应用的属性：

引入方式

内部样式表

通过 style 标签来写 CSS，这种做法不太常见，简单的 CSS 这样写也没问题。

    
hello world

内联样式

通过 HTML 标签当中的 style 属性，来应用一些样式。只针对当前元素生效

    
hello world

外部样式

实际开发当中，用的最多。把 CSS 单独提取出来，放到 .css 文件当中，然后 HTML 代码里通过 link 标签，加入到 head 里面，这个标签可以存在多份，来引入该 CSS。这个方式，可以让多个 HTML 复用一份样式。

p {color: red;
}

hello world

代码风格

样式风格

1. 紧凑风格：就是写在一起 p {color: red;}

2. 展开风格：就是分开写，但是会导致文件变大，浏览器解析的时候也就需要更多的网络带宽，从而影响效率。

样式大小写

CSS 和 HTML 一样不区分大小写，所以在使用的时候，统一使用小写就可以了，所以也就不存在 “驼峰命名法” 了。而是使用 脊柱命名法，就是使用 - 来分割 p {font-size: 20px;}

选择器

基础选择器

单个选择器构成的

标签选择器

这里就是对所有的 p 都会生效。

类选择器

    
hello world
hello java
hello python

所谓的类选择器就相当于我们构造了一个类，然后我们可以给指定的标签加上这个类的属性。

 id选择器

    
hello world
hello java
hello python

id选择器有些类似于类选择器但是其只能被一个p所选择。

通配符选择器

使用*意思为选择所有的标签，这样方便将所有的都给改变为一样的样式。

* {color: red;
}

最大的用途就是取消浏览器的默认样式，不同的浏览器，默认样式不一样，所以前端开发的时候，就要取消默认样式。

复合选择器

后代选择器

通过多个选择器的组合，能够选中某个元素里面的子/孙子元素（后代元素）。

    
张三
张三
张三
李四
李四
李四

子选择器

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

    
张三
张三
张三
李四
李四
李四

并集选择器

并集选择器就是并列的写多个选择器，中间使用逗号来分隔。里面可以写简单的选择器，也可以写符合的选择器。 

    
张三
张三
张三
李四
李四

 伪类选择器

1. 伪类选择器，其实它是属于一些特殊场景的应用。
2. 伪类选择器个数：选择器 + 冒号 + 不同元素的状态+{应用属性}。

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

    
这是一个div

字体

设置字体

    
HELLO
HELLO

 字体大小

   
HELLO
HELLO

 字体粗细

    
HELLO
HELLO

 字体样式

    
HELLO
HELLO

文本属性

文本颜色

通过 color 来决定文本颜色：

1.直接使用单词来表示颜色，不过表示的种类有限

这是一段话

2.使用 rgb 来表示：r 就是 red 表示红色，g 就是 green 表示绿色，b 就是 blue 表示蓝色。通过 rgb 就可以表示各种各样的颜色。这三个分量的表示范围就是：0-255。

    
一段话..........

3.通过 十六进制 来表示 rgb：十六进制就是 00-FF ： 

        div {color: #0000ff;}

4.rgba 就是多了一个透明度，可以弄成那种模糊类型的样子。

文本对齐

文本对齐有：靠左、靠右、靠中。通过 text-align 来实现。

    
一段话..........
一段话..........
一段话..........

文本装饰

1.下划线：

    
这是一段话

2.删除线：

 3.上划线：

 文本缩进

通过 text-indent 来实现文本缩进，单位可以是像素，也可以是 em（就是缩进多少字），一个 em 就是 16 像素。

    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio dolore commodi consequatur, possimus modi nesciunt! Similique repellat quo culpa aliquid ducimus tenetur ut provident sint, ratione ea assumenda reiciendis!LoremloLorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis optio dolore commodi consequatur, possimus modi nesciunt! Similique repellat quo culpa aliquid ducimus tenetur ut provident sint, ratione ea assumenda reiciendis!Loremlo

 文本行高

行高就是字体大小 + 行间距，其实就是 顶线-顶线 之间的距离（或者 底线-底线 的距离等等），通过 line-height 来表示。

不设置行高：

    
这是第一行
这是第二行
这是第三行

    
这是第一行
这是第二行
这是第三行

 设置行高的时候，会同时对上下两个方向都产生影响，上下两个边距都是均等的，所以行高可以实现垂直方向的文本居中对齐： 行高和标签(元素)一样高就可以实现垂直居中了：

    
这是一段话

背景属性

背景颜色

通过 background-color 来实现，用法和 color 非常相似：英文单词，rgb，十六进制数字 都可以。以 rgb 为例：

    
这是一段话

 使用 transparent 之后：

    
这是一段话

 如果不写 background-color 的话，也会默认应用父元素的背景。

背景图片

通过 background-image 来设置背景图片：

    
这是一段话

我们在设置图片的时候默认就是一个平铺的效果也就是会在设置的空间给铺满。

平铺效果

通过 background-repeat 就可以设置是否要平铺了：

    
这是一段话

可以看到这时我们就取消了平铺的效果。 

图片位置

通过 background-position 就可以实现图片的位置了，有两个参数，一个是横坐标，一个是纵坐标：

background-position: 100px 100px;

如果把参数都设置为 center center，就是水平垂直居中。或者只写一个 center 也是居中，通过 top、left、right、bottom 就可以设置上下左右。

图片大小 

 通过 background-size 来调整背景图片大小：

            background-size: 200px,200px;

也可以只设置一个参数来保证图片不发生形变。也可以使用 contain cover 让背景图自适应这里的元素大小。不过 contain 可能会露出一部分背景色，把图片拉伸为元素大小就可以了，保证背景图是指在元素之内。而 cover 就不会让元素露出背景色。

圆角矩形

HTML 里面默认都是长方形，尖锐的样子，通过变成圆角的样子就会变得美观了。通过 border-radius 来变成圆角：

        div {width: 200px;height: 50px;background-color: red;color: white;border-radius: 20px;}

border-radius 设置的越大，弧度也就越大。这里设置的就是内切圆的半径。当弧度等于内切圆半径一半的时候，就是圆形了。

设置圆角：

        div {width: 200px;height: 200px;background-color: red;color: white;border-radius: 100px;}

            border-radius: 50%;

 我们可以通过调整像素或者50%这种形式来实现圆形。

我们也可以单独的设置各个角：

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

查看CSS属性

我们右键检查找到图标就可以查看相关的属性了，找到样式看看前后的对比。 

元素的显示模式

元素的显示模式有很多：块级元素，行内元素，行内块元素。

块级元素（独占一行，可以设置宽度和高度） 【div，h1-h6，p，ul，li，table】
行内元素（不独占一行，不能设置宽度和高度） 【span，a，em，i…】
行内块元素（相当于是一个杂交种：不独占一行，但是能设置高度和宽度） 【input，img…】

上面都是标签的默认的显示模式，也就是说可以通过 CSS 的 display 属性 来修改元素的显示模式 

行内元素

    链接链接链接

块级元素

通过 display 的 block 就可以把行内元素转化为块级元素：

        a {width: 200px;height: 200px;display: block;}

隐藏元素

通过 display 的 none 属性来实现对元素的隐藏：

        a {width: 200px;height: 200px;display: none;}

盒子模型

这个模型其实就是 开发者工具 当中下面的小盒子： 

 就像盖房子，房子的墙，就是边框，房子和房子之间的距离，就是外边距，家具和墙的距离就是内边距，家具就是内容：

因此就可以通过 CSS 属性来设置这几个方面的尺寸：

1. 边框：border
2. 内边距：padding
3. 外边距：margin

边框

边框通过 border 来实现，有三个参数：宽度，颜色，边框效果。

    
hello world

不过设置边框，会撑大原有的元素，元素的大小会在原有是大小上加上边框的大小：

不过这种撑大其实不好用，很容易导致色号质量边框就把元素的尺寸改变了，进一步的就影响了页面布局。例如页面宽度是 500px，一个图片 100 px宽。之前可以显示 5 个图片，现在就显示不了了。在使用的时候，更常用的是设置 box-sizing 属性为 border-box，这个时候设置的边框就会挤压内容，而不是撑大边框：

    
hello world

边框样式

内边距 

通过 padding 来设置，设置的事 边框和内容 之间的距离。直接设置的话，是设置四个方向：

 当然也可以像圆角矩形那样单独设置四个方向。padding 默认情况下，也会撑大元素，通过 box-sizing 的 border-box 也可以防止撑大盒子。

 外边距

通过 margin 来设置：

    
这是一个元素
这是一个元素

 不过两个元素的外边距重合的时候，就是元素1设置了下边距，元素2设置了上边距，两者的距离并不会加起来，而是取两种的较大值：

通过 margin 也可以实现一个元素的水平居中，当然元素是块级元素 ：通过把水平方向的外边距设置为 auto（浏览器自适应），此时就会达到水平居中的效果：

    
这是一个元素

弹性布局

弹性布局主要是安排页面上的元素的位置，也就是排列方式。默认的网页布局，是从上往下的，实际的网页，不仅仅需要从上到下，也需要从左到右。而 flex 布局就是根据这样来的。默认情况下的排列：

        
1
2
3

使用弹性布局之后，就可以在横行当中排列了： 

                display: flex;

水平方向的排列

 通过 flex 布局，默认情况下是挤在左上角的。通过 justify-content 就可以设置水平方向怎么排列。

1.设置 justify-content 为 start 的话，就是左边，和默认情况一样：

 2.设置为 center 就是中间：

 3.设置为 end 就是最右边：

 4.设置为 space-between 可以让元素均匀排列，就是中间有一些间隔：

5.设置为 space-around 就是让元素中间有等分的间隔，而且最左边和右边也有间隔： 

 垂直方向的排列方式

通过 align-items 来完成垂直方向怎么排列：

1.通过 start 来完成靠上布局：

 2.通过 center 来完成居中布局：

 3.通过 end 来完成靠下布局：

实战练习

经典页面结构

导航栏
左侧边栏
内容区域
右侧边栏
页脚