• CSS 基本语法 & 选择器的各种用法 & 常用属性

    目录

    1.CSS的引入方式

    1.1 内部样式

    1.2 外部样式

    1.3 内联样式

    2.选择器

    2.1 基础选择器

    2.2 复合选择器

    3. 常见元素属性

    3.1 字体属性

    3.2 文本属性

    4. 背景属性

    5.圆角矩形

    6.元素的显示模式

    6.1 行内元素和块级元素的两个主要区别

    6.2 改变显示模式

    7.盒模型

     7.1 边框

    7.2  内边距

    7.3 外边距

    8. 弹性布局

    1.CSS的引入方式

    1.1 内部样式

    1. <head>
    2.     <style>
    3.         /* 内部样式 */
    4.         div {
    5.             /* CSS 注释 */
    6.             color:red;
    7.             font-size: 50px;
    8.         }
    9.     style>
    10. head>
    11. <body>
    12.     <div>hello worddiv>
    13. body>

    1.2 外部样式

    1. <head>
    2.     
    3.     <link rel="stylesheet" href="style.css">
    4. head>
    5. <body>
    6.     <div>hello worddiv>
    7. body>

      style.css 文件 

    1. div {
    2.     color: green;
    3.     font-size: 70px;
    4. }

    1.3 内联样式

    1. <body>
    2.     <div>hello worddiv>
    3.     
    4.     <div style="color:blue; font-size: 60px">你好div>
    5. body>

    三种方式的优先级：

    🍃1.内部样式和外部样式，谁写在后面，就显示谁的效果，符合层叠样式的规则。

    🍃2.默认情况下：内联样式的优先级大于内部样式和外部样式。

    样式空格规范：

    • 冒号后面带空格。
    • 选择器和 { 之间也有空格。

    2.选择器

    2.1 基础选择器

    • 标签选择器
    • 类选择器
    • id 选择器
    • 通配符选择器

    2.1.1 标签选择器

    1. <head>
    2.     <style>
    3.         /* 标签选择器 */
    4.         div {
    5.             color: red;
    6.             font-size: 30px;
    7.         }
    8.     style>
    9. head>
    10. <body>
    11.     <div>hellodiv>
    12.     <div>worlddiv>
    13.     <div>nihaodiv>
    14. body>

    2.1.2 类选择器

    1. <head>
    2.     <style>
    3.         /* 类选择器 */
    4.         .one {
    5.             color: green;
    6.         }
    7.         .two {
    8.             font-size: 70px;
    9.         }
    10.     style>
    11. head>
    12. <body>
    13.     
    14.     <div class="one">hellodiv>
    15.     <div>worlddiv>
    16.     <div class="one two">nihaodiv>
    17. body>

    2.1.3 id选择器

    1. <head>
    2.     <style>
    3.         /* id选择器 */
    4.         #world {
    5.             color:rgb(225, 0, 255);
    6.             font-size: 70px;
    7.         }
    8.     style>
    9. head>
    10. <body>
    11.     <div>hellodiv>
    12.     <div id="world">worlddiv>
    13.     <div>nihaodiv>
    14. body>

    2.1.4 通配符选择器

    1.     <style>
    2.         /* 通配符选择器 */
    3.         * {
    4.             color: red;
    5.         }
    6.     style>

    基础选择器的优先级：

    id 选择器 > 类选择器 > 标签选择器

    基础选择器总结
    作用
    		特点
    标签选择器能选出所有相同标签不能差异化选择
    类选择器能选出一个或多个标签根据需求选择, 最灵活, 最常用.
    id 选择器能选出一个标签同一个 id 在一个 HTML 中只能出现一次
    通配符选择器选择所有标签特殊情况下使用

    2.2 复合选择器

    2.2.1 后代选择器

    元素1 元素2 {样式声明}
    • 元素 1 和 元素 2 要使用空格分割
    • 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

    1. <head>
    2.     <style>
    3.         /* 后代选择器，每个部分，都可以是任意的基础选择器 */
    4.         ul li {
    5.             color: red;
    6.         }
    7.  
    8.         .one li {
    9.             color: green;
    10.         }
    11.  
    12.         #two-ol {
    13.             color: blue;
    14.         }
    15.  
    16.         ol .two {
    17.             color: orange;
    18.         }
    19.  
    20.         /* 后代选择器，还可以选孙子 */
    21.         ul a {
    22.             color: blueviolet;
    23.         }
    24.     style>
    25. head>
    26. <body>
    27.     <ol class="one">
    28.         <li>张三li>
    29.         <li>李四li>
    30.         <li>王五li>
    31.     ol>
    32.  
    33.     <ol id="two-ol">
    34.         <li class="two">张三li>
    35.         <li>李四li>
    36.         <li>王五li>
    37.     ol>
    38.  
    39.     <ul>
    40.         <li><a href="#">张三a>li>
    41.         <li>李四li>
    42.         <li>王五li>
    43.     ol>
    44. body>

    🍃1.后代选择器，元素2不一定是儿子，还可以是孙子

    🍃2.后代选择器可以是任意基础选择器的组合. (包括类选择器, id 选择器)

    2.2.2 子选择器

    元素1>元素2 { 样式声明 }
    • 使用大于号分割
    • 只选儿子 , 不选孙子元素 
    1. <head>
    2.     <style>
    3.         /* 子选择器  对孙子不生效*/
    4.         ol>a {
    5.             color: green;
    6.         }
    7.     style>
    8. head>
    9. <body>
    10.     <ol>
    11.         <li><a href="#">张三a>li>
    12.         <li>李四li>
    13.         <li>王五li>
    14.     ol>
    15. body>

    2.2.3 并集选择器

    元素1, 元素2 { 样式声明 }
    1. <head>
    2.     <style>
    3.         /* 并集选择器 */
    4.         ol li,ul li {
    5.             color:red
    6.         }
    7.     style>
    8. head>
    9. <body>
    10.     <ul>
    11.         <li>张三li>
    12.     ul>
    13.  
    14.     <ol>
    15.         <li><a href="#">张三a>li>
    16.         <li>李四li>
    17.     ol>
    18. body>

    2.2.4 伪类选择器

    此处只演示 hover、active

    1. <head>
    2.     <style>
    3.         /* 伪类选择器 - 鼠标悬停的效果 */
    4.         div:hover {
    5.             color: green;
    6.         }
    7.         /* 伪类选择器 - 鼠标按下的效果 */
    8.         div:active {
    9.             color:blue
    10.         }
    11.     style>
    12. head>
    13. <body>
    14.     <div>
    15.         hello world
    16.     div>
    17. body>
    复合选择器总结
    选择器
    		作用注意事项
    后代选择器选择后代元素可以是孙子元素
    子选择器选择子元素只能选儿子, 不能选孙子
    并集选择器选择相同样式的元素更好的做到代码重用
    伪类选择器选择不同状态的链接重点掌握 hover、active

    3. 常见元素属性

    3.1 字体属性 

    1. <head>
    2.     <style>
    3.         div {
    4.             /* 字体大小 */
    5.             font-size: 100px;
    6.  
    7.             /* 字体颜色 */
    8.             color: red;
    9.  
    10.             /* 字体粗细 */
    11.             font-weight: lighter; 
    12.             font-weight: normal;
    13.             font-weight: bold;
    14.             font-weight: bolder;
    15.  
    16.             /* 字体属性 */
    17.             font-family: 宋体;
    18.         }
    19.     style>
    20. head>
    21. <body>
    22.     <div>
    23.         hello world
    24.     div>
    25. body>

    3.1.1 文字样式

    1.     <style>
    2.         /* 取消倾斜 */
    3.         div {
    4.             font-style: normal;
    5.         }
    6.         /* 设置倾斜 */
    7.         div {
    8.             font-style: italic;
    9.         }
    10.     style>

    3.2 文本属性

    3.2.1 设置文本颜色

    1. <head>
    2.     <style>
    3.         div {
    4.             color: red;
    5.             color: #00ff00;
    6.             color: rgb(0, 0, 255);
    7.         }
    8.     style>
    9. head>
    10. <body>
    11.     <div>
    12.         hello world
    13.     div>
    14. body>
    color 属性值的三种写法：
    • 预定义的颜色值 (单词)
    • [ 最常用 ] 十六进制形式
    • RGB 方式

    认识 RGB：

    我们使用 R (red), G (green), B (blue) 的方式表示颜色 ( 色光三原色 ). 三种颜色按照不同的比例搭配 , 就能混合出各种五彩斑斓的效果.
    计算机中针对 R, G, B 三个分量 , 分别使用一个字节表示 (8 个比特位 , 表示的范围是 0-255, 十六进制表示为 00-FF).
    数值越大 , 表示该分量的颜色就越浓 . 255, 255, 255 就表示白色 ; 0, 0, 0 就表示黑色

    3.2.2 文本对齐 

    1.     <style>
    2.         div {
    3.             /* 居中对齐、左对齐、右对齐 */
    4.             text-align: center;
    5.             text-align: left;
    6.             text-align: right;
    7.         }
    8.     style>

    3.2.3 文本装饰

    1.     <style>
    2.         div {
    3.             text-decoration: underline;
    4.             text-decoration: none;
    5.             text-decoration: overline;
    6.             text-decoration: line-through;
    7.         }
    8.     style>

    四个取值的效果：

    • underline 下划线 . [ 常用 ]
    • none 啥都没有 . 可以给 a 标签去掉下划线
    • overline 上划线 . [ 不常用 ]
    • line-through 删除线 [ 不常用 ]

    3.2.4 文本缩进 

    text-indent: [值];

    单位可以使用 px 或者 em，一个文字大小就是 1em。

    1.     <style>
    2.         div {
    3.             /* 首行缩进两个字 */
    4.            text-indent: 2em;
    5.         }
    6.     style>

    3.2.5 行高

    line-height: [值];

    行高 = 文字高度 + 行间距

    也可以是两行文字的顶线之间的距离、中线之间的距离、基线之间的距离或者底线之间距离。

    1.     <style>
    2.         div {
    3.            line-height: 50px;
    4.            /* 行高也可以取 normal 等值.这个取决于浏览器的实现. chrome 上 normal 为 21 px */
    5.            line-height: normal;
    6.         }
    7.     style>

    4. 背景属性

    1.     <style>
    2.         div {
    3.             /* 背景颜色 可设置的值和文本颜色差不多*/
    4.             background-color: grey;
    5.  
    6.             /* 背景图片 */
    7.             background-image: url(image/female.png);
    8.  
    9.             /* 背景平铺 */
    10.             background-repeat: no-repeat;
    11.  
    12.             /* 背景位置 */
    13.             background-position: center top;
    14.  
    15.             /* 背景尺寸 */
    16.             background-size: contain;
    17.         }
    18.     style>

    🍃1.背景颜色：可设置的值和文本颜色差不多，默认情况下是 transparent（透明）的

    🍃2.背景图片：比 image 更方便控制位置，url 里可以放相对路径、绝对路径，网络路径

    🍃3.背景平铺：重要的四个取值，repeat（平铺），no-repeat（不平铺），repeat-x（水平平铺），repeat-y（垂直平铺）。默认情况下是 repeat。

    🍃4.背景位置   -    参数有三种风格:

    • 方位名词: (top, left, right, bottom)
    • 精确单位: 坐标或者百分比(以左上角为原点)
    • 混合单位: 同时包含方位名词和精确单位

    🍃5.背景尺寸：可以填具体数值，例如：50px，还可以是使用 cover（把背景图像扩展至足够大，以使背景图像完全覆盖背景区域）和 contain（把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域. ）

    5.圆角矩形

    1. 通过 border-radius 使边框带圆角效果.
    2.  
    3. 基本用法：border-radius: length;
    1.     <style>
    2.         div {
    3.             width: 200px;
    4.             height: 200px;
    5.             background-color: grey;
    6.             border: 2px solid green;
    7.             /* 圆角矩形 */
    8.             border-radius: 10px;
    9.             /* 将 border-radius 的值设为正方形边长的一半就可以变为圆形 */
    10.         }
    11.     style>

    6.元素的显示模式

    在 CSS 中 , HTML 的标签的显示模式有很多 . 这里只介绍 "块级元素" 和 "行内元素"。
    1.常见的块级元素： h1 - h6、 p、 div、 ul、 ol、li.......
          特点：
    • 独占一行
    • 高度, 宽度, 内外边距, 行高都可以控制
    • 宽度默认是父级元素宽度的 100% ( 和父元素一样宽 )
    • 是一个容器 ( 盒子 ), 里面可以放行内和块级元素 .
          注意：
    • 文字类的元素内不能使用块级元素
    • p 标签主要用于存放文字 , 内部不能放块级元素 , 尤其是 div
    2.常见的行内元素： a、 strong、 b、 em、 i、 del、 s、 ins、 u、 span
        
        特点:
    • 不独占一行, 一行可以显示多个
    • 设置高度 , 宽度 , 行高无效
    • 左右外边距有效( 上下无效 ). 内边距有效 .
    • 默认宽度就是本身的内容
    • 行内元素只能容纳文本和其他行内元素, 不能放块级元素

    6.1 行内元素和块级元素的两个主要区别

    🍃1.块级元素独占一行 , 行内元素不独占一行
    🍃2.块级元素，高度、宽度、内外边距、行高，都是可以控制的，行内元素，设置高度、宽度、行高，都是无效的，设置内边距有效，设置外边距，左右外边距有效，上下外边距无效。

    6.2 改变显示模式

    使用 display 属性可以使 div 变成行内元素，也可以使 a，sapn 等元素变成块级元素。

    • display: block 改成块级元素 [常用]
    • display: inline 改成行内元素 [很少用]
    • display: inline-block 改成行内块元素 （又能设置行高，又不独占一行）
    display 还可以让元素隐藏(不显示)： display：none 
    1.     <style>
    2.         span {
    3.             width: 80px;
    4.             height: 90px;
    5.             display: block;
    6.         }
    7.     style>
    8.     <span>
    9.         哇哈哈
    10.     span>
    11.     <span>
    12.         helloworld
    13.     span>

    7.盒模型

    HTML 中元素的最基本的排列规则：

    1.每个 HTML 元素，，都是一个 "矩形" 的盒子。

    2.每个这样的盒子，都由这几个部分构成：

     7.1 边框

    基础属性
    • 粗细 : border-width
    • 样式: border-style, 默认没边框 . solid 实线边框 dashed 虚线边框 dotted 点线边框
    • 颜色: border-color 
    1. div {
    2.     width: 500px;
    3.     height: 250px;
    4.     border-width: 10px;
    5.     border-style: solid;
    6.     border-color: green; 
    7. }
    8.  
    9.  
    10. div {
    11.     /* 支持简写 */
    12.     border: 1px solid red;
    13. }

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

    border-top/bottom/left/rig

    边框会撑大盒子

    可以通过设置 box-sizing: border-box，使边框不再撑大盒子，默认情况是 content-box.

     box-sizing: border-box;

    7.2  内边距

    通过 padding 属性 设置内容和边框之间的距离 .
    可以给四个方向都加上边距：
    • padding-top
    • padding-bottom
    • padding-left
    • padding-right 
    1. div {
    2.     height: 200px;
    3.     width: 300px;
    4.     padding-top: 5px;
    5.     padding-left: 10px; 
    6.     
    7.     /* 先设置上下，，再设置左右 */
    8.     padding: 20px,40px;
    9.     /* 顺时针设置，上、右、下、左 */
    10.     padding: 20px,40px,20px,40px;
    11.     /* 设置四个方向相同的px */
    12.     padding: 20px;
    13. }

    7.3 外边距

    控制盒子和盒子之间的距离 . 外边距和内边距类似，也是可以四个方向分别设置；也是可以写作，1个数字，2个数字，4个数字...规则和 padding 完全一致。 
    1. div {
    2.     height: 50px;
    3.     width: 50px;
    4.     margin-top: 5px;
    5.     margin-left: 10px; 
    6.     
    7.     /* 先设置上下，，再设置左右 */
    8.     margin: 20px,40px;
    9.     /* 顺时针设置，上、右、下、左 */
    10.     margin: 20px,40px,20px,40px;
    11. }

    外边距要注意的细节：

    块级元素水平居中
    前提：
    • 指定宽度 ( 如果不指定宽度 , 默认和父元素一致 )
    • 把水平 margin 设为 auto
      三种写法均可： 
    1. margin-left: auto; margin-right: auto;
    2. margin: auto;
    3. margin: 0 auto;

    注意：

    🍃1. 这个水平居中的方式和 text-align 不一样.
    🍃2.margin: auto 是给块级元素用得到.
    🍃3.text-align: center 是让行内元素或者行内块元素居中的.
    🍃4.对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式.

    8. 弹性布局

    未使用弹性布局时的效果：

    1. <style>
    2.     div {
    3.         height: 150px;
    4.         background-color: red;
    5.     }
    6.     span {
    7.         background-color: green;
    8.         width: 100px;
    9.         height: 100px;
    10.     }
    11. style>
    12. <div>
    13.     <span>1span>
    14.     <span>2span>
    15.     <span>3span>
    16. div>

     使用弹性布局后的效果：加上 display：flex

    此时给 span 设置高度、宽度就都会生效，不再是行内元素了。

     flex 布局基本概念

    flex 是 flexible box 的缩写 . 意思为 " 弹性盒子 ".
    任何一个 html 元素 , 都可以指定为 display:flex 完成弹性布局 .
    flex 布局的本质是给父盒子添加 display:flex 属性 , 来控制子盒子的位置和排列方式 .
    基本概念：
    • 被设置为 display:flex 属性的元素 , 称为 flex container
    • 它的所有子元素立刻称为了该容器的成员, 称为 flex item
    • flex item 可以纵向排列 , 也可以横向排列 , 称为 flex direction ( 主轴 )
    常用属性
    弹性布局常用的属性：
    🍃1.display： flex  开启弹性布局
    🍃2.justify-content   描述主轴上的排列方式（默认水平方向）
    🍃3.align-items  描述侧轴上的排列方式（侧轴是和主轴垂直的方向）
    注意：
    当给一个元素设为 display: flex 此时子元素就不再遵守原来的 "块级元素"、"行内元素" 的规则了，变成了弹性元素，这些元素就会按照弹性布局的规则来排列，但是并不影响孙子元素。
    🍁justify-content
    属性取值：
    值描述
    flex-start默认值。项目位于容器的开头    -     默认就是靠左排列
    flex-end

    项目位于容器的结尾      -      默认就是靠右排列

    center项目位于容器中央     -      居中
    sapce-between项目在行与行之间留有间隔
    space-around项目在行之前、行之间、和行之后留有间隔
    1.     <style>
    2.         div {
    3.             height: 150px;
    4.             background-color: red;
    5.             display: flex;
    6.             
    7.             justify-content: space-between;
    8.             justify-content: space-around;
    9.             justify-content: flex-end;
    10.             justify-content: flex-start;
    11.             justify-content: center;
    12.         }
    13.         span {
    14.             background-color: green;
    15.             width: 100px;
    16.             height: 100px;
    17.         }
    18.     style>
    19.     <div>
    20.         <span>1span>
    21.         <span>2span>
    22.         <span>3span>
    23.     div>

    未指定 justify-content 时，默认按照从左到右的方向布局：

     设置 justify-content: flex-end 时：

     设置 jutify-content: center 时：

     设置 justify-content: space-around 时：

     设置 justify-content: space-between 时：

    🍁align-items
    属性取值：
    值描述
    stretch默认值，行拉伸以占据剩余空间
    center朝着弹性容器的中央对行打包
    flex-start朝着弹性容器的开头对行打包
    flex-end朝着弹性容器的结尾对行打包
    space-between

    行均匀分布在弹性容器中

    sapce-around

    行均匀分布在弹性容器中，两端各占一半

    1. <style>
    2.     div {
    3.         height: 150px;
    4.         background-color: red;
    5.         display: flex;
    6.  
    7.         justify-content: space-between;
    8.         align-items: stretch;
    9.         /* align-items:: center; */
    10.     }
    11.     span {
    12.         background-color: green;
    13.         width: 100px;
    14.         height: 100px;
    15.     }
    16. style>
    17. <div>
    18.     <span>1span>
    19.     <span>2span>
    20.     <span>3span>
    21. div>

    align-items: stretch

    这个是 align-content 的默认值 . 意思是如果子元素没有被显式指定高度 , 那么就会填充满父元素的
    高度 .

     align-items: center:

    实现垂直居中.

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

  • 相关阅读:
    【Django】执行查询—创建和修改对象
    阿杰的活动
    HNUCM 您好中国
    Redis运维实战之集群中的脑裂
    项目解决方案：海外门店视频汇聚方案（全球性的连锁店、国外连锁店视频接入和汇聚方案）
    【前端CSS】网站都变成灰色了，它是怎么实现的？（含源代码解析）
    768. 最多能完成排序的块 II 分治
    unity中压缩文件与解压文件
    Thread线程类基本使用(下)
    php计算机毕业设计基于thinkphp框架的培训班报名作业管理系统
  • 原文地址：https://blog.csdn.net/xaiobit_hl/article/details/126880328