css

无标签
前端
发布日期:   2021-11-22
文章字数:   2.1k
阅读时长:   8 分

1. CSS样式表

css样式表就是给我们的网页添加样式的,让网页变得好看;

CSS样式表也称为:

  • 级联样式表
  • 层叠样式表

2. CSS的引用方式

  • 内联方式使用CSS

    1
    2
    <!--把样式直接加入到html标签的属性中-->
    <span style="color: red">新卓越</span>计算机培训

    优点: 调试简单

    缺点: 无法重用CSS属性,不方便维护(标签和样式没有分离)

    **建议:**这种方式在开发阶段可以单独调试某个属性时使用;

  • 内部方式使用CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内部样式引入</title>

        <!--通过在head中的style标签来编写内部样式-->
        <style>
            span {
                color: #f00;
            }
        </style>
    </head>
    <body>
    <span>新卓越</span>计算机培训
    <span>新卓越</span>Java大数据培训
    </body>
    </html>

    优点: 方便调试

    缺点: 实现了标签和样式分离了

    **建议:**在开发过程中建议使用,也不建议在生产环境直接使用,因为没有实现显示(html)与样式(css)分离

  • 外部方式引入CSS

    根目录下创建css目录，创建.css文件，然后通过link标签引入外部的CSS。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内部样式引入</title>

        <!--    通过link标签引入外部的CSS
            注意: 一定要添加rel属性,值为: stylesheet
        -->
        <link href="css/base.css" rel="stylesheet">
    </head>
    <body>
    <span>新卓越</span>计算机培训
    <span>新卓越</span>Java大数据培训
    </body>
    </html>

    优点: 显示和样式分离,维护方便

3. Html编写神器

emment表达式

1
2
3
>: 代表下一级
*: 几个
ul>(li>a[href=http://wwww.baidu.com]): 属性写法

4. CSS的语法

1
2
3
4
5
选择器{
    css属性名称1: css属性值1;
    css属性名称2: css属性值2;   
    css属性名称3: css属性值3;   
}

5. CSS中的文本属性

1
2
3
4
5
6
#字体颜色  常用的可以用英文表示  rgb表示:rgb(0, 0, 255)  rgba; color: rgba(0, 0, 255, 0.4); 最后一个a代表透明度0.0~1.0之间的小数;  16进制的写法: #ff00ff
color: red;
font-size: 50px; #字体大小
font-weight:normal;# normal:普通字体粗细,bold:加粗
font-style: italic;#normal: 普通  italic:斜体
font-family: "PingFang SC", Arial, "Microsoft YaHei", sans-serif;#字体的家

6. CSS中基础的选择器

  • ID选择器

    1
    2
    3
    #id值{
    	css属性
    }

  • class选择器

    1
    2
    3
    .class属性的值{
        css属性
    }

  • 标签选择器

    1
    2
    3
    标签名称{
        css属性
    }

7. CSS的优先级

  • 内联样式的优先级是最高的
  • 同等选择器,写在后面的覆盖前面的css属性
  • id选择器>class选择器>标签选择器
  • !important 强制生效属性;这种方式比内联样式的优先级都要高

8. CSS中的高级选择器

8.1 子类选择器

>代表子类选择器

8.2 后代选择器

空格代表后代选择器

8.3 分组选择器

1
2
3
4
5
.div2 p,.div22 h3, #div11 h1 {
    color: red;
    font-size: 50px;
    font-style: italic;
}

8.4 过滤选择器

1
2
3
4
5
6
ul li:first-child: 选择ul中的第一个li
ul li:last-child:选择ul中的最后一个li
ul li:nth-child(n):选择ul中的第n个li,n从1开始(不会自动忽略中间加入的li元素)
ul li:nth-last-child(n):选择ul中的倒数第n个li,n从1开始(不会自动忽略中间加入的li元素)
ul li:nth-of-type(n): 选择ul中的第n个li,n从1开始,(会自动忽略中间加入的li元素)
ul li:nth-last-of-type(n):选择ul中的倒数第n个li,n从1开始,(会自动忽略中间加入的li元素)

8.5 属性选择器

1
2
input[name]: 选择包含 name属性的input
input[name='nickname']: 选择name属性的值为nickname的input

8.6 伪类选择器

选择鼠标移到链接上的样式

1
2
3
.box:hover {
    background-color: red;
}

8.7 伪元素选择器

1
2
3
4
5
6
7
8
每个box元素之前插入内容
.box::before{
    content: "nihao";
}
每个box元素之后插入内容
.box::after{
    content: "最后";
}

9. 背景属性

1
2
3
4
5
6
7
8
9
.box {
    width: 400px;
    height: 200px;
    background-color: #c1c1c1;
    background-image: url("./images/mm.png");
    background-size: 100px 100px;  /*背景的大小*/
    background-repeat: no-repeat; /*背景的平铺方式*/
    background-position: 100px 10px; /*背景位置*/
}

10. 边框属性

1
2
3
4
5
border-top: 20px solid red; /*上边框*/
border-bottom: 20px solid red; /*下边框*/
border-left: 20px solid red; /*左边框*/
border: 20px solid red; /*上下左右边框*/
border-radius: 10px; /*边框角度*/

11. 文本居中

1
2
3
4
5
6
7
8
.box h1 {
    width: 240px;
    height: 100px;
    background-color: #ccc;
    text-align: center;  /*内容居中*/
    line-height: 100px;  /*行高*/
    overflow: hidden;  /*超出部分隐藏*/
}
1
letter-spacing: 0.5em;  /*字体间距*/
1
text-decoration: overline;  /*line-through: 删除线   underline: 下划线  overline:上划线*/

12. CSS中的盒子模型

CSS中的所有元素都是一个盒子;

image-20211124191244693

盒子的宽高 = 内容的宽高+内边距+边框

13. 盒子里面内容的占用

1
2
box-sizing: content-box;/*content-box:盒子的宽高=盒子本身的宽高+内边距+边框*/
box-sizing: border-box; /*盒子的宽高不会再原来的基础上增加*/

14. html中的元素的分类

  • 行内元素(inline): 不独占一行,不能设置宽高,默认的宽高为包裹内容(span,i,a)
  • 块级元素(block): 独占一行,能设置宽高,默认高度是包裹内容,宽度是填充容器(div,p,h1~h6,ul,li,ol,li,table,tr,form)
  • 行内块级元素(inline-block):不独占一行,能设置宽高,默认的宽高为包裹内容(input,img)

手动改变元素的类型: 

1
2
3
4
display: none;  //元素在页面上不显示
display: block;  //元素的显示方式为块级元素
display: inline-block  //元素的显示方式为行内块级元素
display: inline;  //元素的显示方式为行内元素

15. CSS中的浮动

如果给元素设置浮动属性,则元素会脱离标准文档流;同时也会变成行内块级元素;

设置浮动的元素知道碰到阻止的元素才进行停止

1
float:left|right;

清楚浮动对其他元素的影响

1
clear: both;

通常在项目中会创建一个清除浮动的工具类,应用在浮动元素的父容器上:

1
2
3
4
5
.clearFix::after {
    content: "";
    display: block;
    clear: both;
}

16. 浮动的使用建议

在商业项目的应用中,能不使用浮动尽量不要使用浮动;浮动不适合做webapp;

17. CSS的定位

  • 相对定位: 底层元素没有脱离标准文档流,相对于元素本身进行定位

  • 绝对定位: 脱离标准文档流,先查看父元素有没有设置定位,如果设置了定位就以父元素为参照进行定位,如果父元素没有设置定位,则一直向上找,指导找到有设置定位的元素位置,如果一个都没找到,则以body为参照进行定位;一般给大家一个口诀 父相子绝

  • 固定定位

    脱离标准文档流,根据浏览器的窗口进行定位

18. 弹性盒模型

设置一个盒子为弹性盒子: display:flex;

弹性盒子中的内容都会变成行内块级元素;

弹性盒子的属性:

1
2
3
4
5
display: flex;
flex-direction: row; /*弹性盒子中的元素排列方向(默认row)*/
flex-wrap: nowrap; /*弹性盒子中的内容超出宽度是否折行(默认不折行)*/
justify-content: space-between; /*主轴上的对齐方式*/
align-items: center; /*侧轴上的对齐方式*/

19. 在一个CSS中引入其他css

1
2
3
@import "./xxx.css";
或者
@import url("./xxx.css");

注意: @import一定在样式的最开始位置;

@import可以将一个样式表导入到另外的样式表或者页面中;

20. 解决折行而产生的空格问题

行内元素由于换行而产生的空格问题解决:

  • 给父元素设置黑体大小为0px
  • 子盒子自己设置字体大小

21. 解决margin-top引发的塌陷问题

有以下两种方案可以解决塌陷问题,任选其一即可;

1
2
border: 1px solid transparent;
overflow: hidden;(推荐)
文章作者: Yang Shiyu
文章链接: https://yangshiyu52.github.io/2021/11/22/qian-duan-css/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Yang Shiyu !
无标签
赏
  目录