前端三件套—CSS入门

上篇文章：

前端三件套—HTML入门https://blog.csdn.net/sniper_fandc/article/details/147070026?fromshare=blogdetail&sharetype=blogdetail&sharerId=147070026&sharerefer=PC&sharesource=sniper_fandc&sharefrom=from_link

目录

1 引入CSS

1.1 内部样式

1.2 内联样式

1.3 外部样式

2 选择器

2.1 标签选择器

2.2 类选择器

2.3 id选择器

2.4 通配符选择器

2.5 后代选择器

2.6 子选择器

2.7 并集选择器

2.8 伪类选择器

（1）链接

（2）:force

3 常见样式

3.1 字体属性

3.2 文本属性

3.3 背景属性

3.4 圆角矩形

4 行级元素与块级元素

4.1 区别

4.2 显示模式

5 盒模型

5.1 边框border

5.2 内边距padding

5.3 外边距margin

6 弹性布局

6.1 开启弹性布局

6.2 justify-content（主轴布局）

6.3 align-items（侧轴（与主轴垂直）布局）

---

        CSS是层叠样式表，负责为页面中的元素设置各种各样的样式，层叠的意思是对于同一个元素样式可以叠加。

        CSS的语法规范：选择器+{一条/多条声明}，声明表示添加什么样式，声明的属性是键值对，键和值之间用:分隔，键值对之间用;分隔。CSS代码写在<style></style>标签之间，该标签放在html代码中任何位置都可以生效，但是一般放在head标签中。

        注意：在CSS中注释的格式发生变化，使用/* */来注释，快捷键Ctrl+/键。

1 引入CSS

1.1 内部样式

        直接把style标签的CSS代码放到html文件中。

        这种方式优点是使html页面的内容和样式分离，但是缺点是分离的还不彻底，当CSS样式很多时代码很臃肿。

1.2 内联样式

        style作为标签的属性，优先级很高，会覆盖其他样式的写法。

        缺点是只能写简单样式。

1.3 外部样式

        单独创建CSS文件写html的样式，通过link标签引入CSS样式。（推荐）

<link rel="stylesheet" href="CSS文件路径">

        这种方式实现了html和CSS的分离，但是也有缺点：受浏览器缓存影响，修改的样式不能及时更新到页面中（需要强制刷新页面）。

        注意：关于样式的覆盖顺序，html文件从上往下加载，因此越靠近下面的样式越优先生效。

2 选择器

2.1 标签选择器

        使用标签名选中某一种标签：

    <style>div {color: rgba(0, 255, 55, 0.749);font-size: 50px;}</style>

        比如上述方式就会选中所有的div标签。

2.2 类选择器

        使用.+class名的方式选中某一类标签（标签中用class属性，并且值相同）：

    <style>.one {color: red;}</style><div class="one">hello java!</div>

        上述方式.one就会选中class的值为one的标签。

        一个标签也可以引用多个类选择器：

    <style>.one {color: red;}.two {font-size: 20px;}</style><div class="one two">hello!</div>

        上述方式div标签就会同时引入one和two两种类选择器。

        注意：类选择器优先级比标签选择器更高。

2.3 id选择器

        使用#+id属性值（标签的id属性唯一）来选择标签：

    <style>#world {color:blue;}</style><div id="world">helloworld</div>

        上述代码就会把id="world"的标签设置样式。

        注意：优先级是id选择器>类选择器>标签选择器。

2.4 通配符选择器

        使用*来选中所有的标签（用于设置公共相同的样式）：

* {color: red;}

2.5 后代选择器

        使用父元素+空格+子元素（子元素可以是任意后代）的方式来选择标签，只选中子元素，这里的父元素和子元素可以是任意标签选择器、类选择器或id选择器的组合：

    <style>ol li {color: green;}ol a {color: gold;}#ul-id a{color: red;}</style><ol><li>选项1</li><li>选项2</li><li><a href="#">选项3</a></li></ol><ul id="ul-id"><li>选项4</li><li>选项5</li><li><a href="#">选项6</a></li></ul>

        上述实现效果是ol列表（有序）先着色绿色，再修改ol列表的a标签（超链接）着色为金色，最后对ul列表（无序）的a标签着色红色，效果如下：

2.6 子选择器

        使用父元素+>+子元素（子元素只能是儿子）的方式来选择标签。其他使用方法同后代选择器，不再赘述。

2.7 并集选择器

        使用多个选择器选择多组标签，多个选择器之间使用,分隔。示例在后代选择器基础上添加：

        ol li, ul li{color: black;}

        此时结果会将所有的li表项都变为黑色：

        这里a标签并没有被选中，因此之前添加的样式没有被覆盖。

2.8 伪类选择器

（1）链接

        这类选择器主要是对超链接（a标签）进行点击时的效果样式的添加，有如下几类：

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

        a:link {color: black;/* 去掉 a 标签的下划线 */text-decoration: none;}a:visited {/* 未点击时绿色 */color: green;}a:hover {/* 悬停时红色 */color: red;}a:active {/* 点击后蓝色 */color: blue;}

（2）:force

        选择获取焦点（被选中）的input表单元素，这个使用较少，不再展示。

3 常见样式

        这里只列举常见样式的使用，更多样式及用法请查看mdn文档。

3.1 字体属性

        （1）字体（不建议用中文字体）：font-family，比如font-family:'Microsoft YaHei';或font-fam

ily:'微软雅黑';。

        （2）大小（单位px）：font-size，比如font-size: 20px;。

        （3）粗细（使用数字（100-900）或单词表示粗细，700==bold，400是不变粗==normal）：font-weight，比如：font-weight: bold;。

        （4）样式：font-style，比如font-style: italic;（倾斜），font-style: normal;（不倾斜）。

3.2 文本属性

        （1）颜色：color，三种值表示方式1.red（颜色的名称）2.#ff0000（十六进制）3.rgb(255, 0, 0)（红，绿，蓝，数字越大该分量越浓）4.rgba（多了一个透明度参数）。

        （2）文本对齐：text-align，值有center:居中对齐、left:左对齐、right:右对齐。

        （3）文本装饰：text-decoration，值有underline下划线、none啥都没有（可以给a标签去掉下划线）、overline上划线、line-through删除线。

        （4）文本缩进：text-indent，值是正数或负数（向左凸出），单位是px或em（1em表示1个文字的大小）。

        （5）行高：line-height，值是数字px，注意：行高=上边距+下边距+字体大小，可以取nor

mal等值（不同浏览器效果不同，chrome为21px），如果行高等于元素高度（height==line-height），可以实现文本垂直居中。

3.3 背景属性

        （1）背景颜色：background-color，除了颜色外，取值还可以是transparent表示透明背景。

        （2）背景图片：background-image，取值url(图片路径)。

        （3）背景平铺：background-repeat，取值repeat平铺（复制多份铺地砖）、no-repeat不平铺、repeat-x水平平铺、repeat-y垂直平铺，默认repeat。注意：背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方。

        （4）背景位置：background-position，取值x y;，取值类型有：方位名词(top, left, right, bott

om, center)、精确单位坐标或者百分比(以左上角为原点)、混合单位同时包含方位名词和精确单位，

        注意：如果给两个值，第一个是x，第二个是y。如果给一个值，该值一定是x，第二个值默认居中。

        （5）背景尺寸：background-size，取值两部分，宽度 高度，可以是数字、百分数，也可以是单词cover（扩展背景图片完全覆盖背景区域）或contain（扩展背景图片宽度高度完全覆盖内容区域（内容区域小于背景区域））。

3.4 圆角矩形

        border-radius: length，该属性可以使边框带有弧度，length是内切圆半径（px、em或百分数），越大弧度越大。如果是50%是圆（正方形宽的一半），如果要圆角矩形，就设置为矩形高度的一半。

        注意：border-radius可以同时设置四个角，使用四个length（空格分隔）或使用border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。

4 行级元素与块级元素

4.1 区别

        （1）块级元素独占一行，行内元素不独占一行。

        （2）块级元素可以设置宽高，行内元素不能设置宽高。

        （3）块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置。

        （4）块级元素内部可以是块级或行内，行级元素内部不能是块级。

4.2 显示模式

（1）display: block改成块级元素。

（2）display: inline改成行内元素。

（3）display: inline-block改成行内块元素。

5 盒模型

        html的每个元素都是一个盒子，内容content周围还有一些空间，分别是内边距padding、边框border和外边距margin。实际上，元素之间的间隔是border与border之间的距离。

5.1 边框border

        边框border属性有三个参数：border-width（粗细）、border-style（样式：默认没边框，有solid实线边框、dashed虚线边框、dotted点线边框等）、border-color（颜色）。

        还可以简写：border:1px solid red;，表示边框是1px粗细、实线边框和红颜色。也可以四个方向分别写指定的样式。

        注意：边框可以撑大盒子。使用通配符选择器设置属性box-sizing: border-box;可以控制浏览器默认行为不再撑大盒子。

5.2 内边距padding

        padding是设置内容与边框的距离，有多种写法：

        1.padding:1px;(上下左右都是1px)。

        2.padding:1px 2px;(上下1px，左右2px)。

        3.padding:1px 2px 3px;(上1px，左右2px，下3px)。

        4.padding:1px 2px 3px 4px;(上1，右2，下3，左4，顺时针)。

        5.padding-top（还有其他三个）单独设置。

        注意：内边距也会撑大盒子，同样可以用box-sizing: border-box;设置不再扩大。

5.3 外边距margin

        margin属性设置盒子与其他盒子之间的距离。使用规则用padding，不再赘述。

        设置元素水平居中（不是文本居中，并且前提是指定块级元素的宽度了）：margin: 0 auto;或margin-left: auto;margin-right: auto;或margin: auto;。不能使用auto来进行垂直居中。

        注意：上下排列的两个元素的外边距是部分重合的，即两个元素的实际距离是各自外边距的最大值。左右排列的两个元素的外边距是叠加的，即两个元素的实际距离是各自外边距的加和。

6 弹性布局

        对于元素布局方式，最常见的就是居中操作，但是使用margin的布局非常局限，弹性布局就是专门解决一维空间（线）的布局方式的工具。

        开启弹性布局flex后，元素就变成flex container，其中的子元素就变成容器的成员flex item，而在容器布局方式存在主轴flex direction，布局时沿主轴方向布局，默认是横轴。

        注意：当父元素设置为display: flex之后，子元素的float，clear，vertical-align都会失效。

6.1 开启弹性布局

        display:flex;为父元素开启弹性布局。

        注意：默认子元素高度就会和父元素高度一致，除非单独设置子元素高度。

6.2 justify-content（主轴布局）

        该属性有以下取值：

值	含义
flex-start	默认值，子元素位于主轴开头布局（子元素间紧贴）
flex-end	子元素位于主轴结尾布局（子元素间紧贴）
center	子元素位于主轴中间布局（子元素间紧贴）
space-between	子元素平均分配主轴布局（子元素间有间隔，子元素紧贴主轴开头和结尾）
space-around	子元素平均分配主轴布局（子元素间有间隔，子元素与主轴开头和结尾也有间隔）

        注意：可以使用flex-direction: column;将主轴由默认的水平方向改为垂直方向。

6.3 align-items（侧轴（与主轴垂直）布局）

        该属性有以下取值：

值	含义
stretch	默认值，行拉伸与父元素高度一致
flex-start	子元素位于侧轴开头布局（子元素间紧贴）
flex-end	子元素位于侧轴结尾布局（子元素间紧贴）
center	子元素沿侧轴方向居中
space-between	子元素平均分配侧轴布局（子元素间有间隔，子元素紧贴侧轴开头和结尾）
space-around	子元素平均分配侧轴布局（子元素间有间隔，子元素与侧轴开头和结尾也有间隔）

        注意：align-items只能针对单行元素来实现。如果有多行元素，就需要使用item-contents或grid布局（网格布局，二维）。因此在上述取值中会发现space-between和space-around通常仅对主轴生效，不对侧轴生效。

下篇文章：

前端三件套—JavaScript语法入门https://blog.csdn.net/sniper_fandc/article/details/147071933?fromshare=blogdetail&sharetype=blogdetail&sharerId=147071933&sharerefer=PC&sharesource=sniper_fandc&sharefrom=from_link​​​​​​​