图书
课程
文章
专题
电子书

针对CSS说一说｜技术点评

程序员哆啦A梦

Github来源：针对CSS说一说 | 求星星 ✨ | 给个❤️关注，❤️点赞，❤️鼓励一下作者

大家好，我是魔王哪吒，很高兴认识你~~

哪吒人生信条：如果你所学的东西 处于喜欢 才会有强大的动力支撑。

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油，2021加油！欢迎关注加我vx:xiaoda0423，欢迎点赞、收藏和评论

前言

如果这篇文章有帮助到你，给个❤️关注，❤️点赞，❤️鼓励一下作者，接收好挑战了吗？文章公众号首发，关注 程序员哆啦A梦 第一时间获取最新的文章

❤️笔芯❤️~

CSS使用

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style></style>
    </head>
    <body>
        <div id="header">
            <h1>导航栏</h1>
            <ul>
                <li><a href="#">目录1</a></li>
                <li><a href="#">目录2</a></li>
                <li><a href="#">目录3</a></li>
                <li><a href="#">目录4</a></li>
            </ul>
        </div>
    </body>
</html>

效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #header ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>导航栏</h1>
            <ul>
                <li><a href="#">目录1</a></li>
                <li><a href="#">目录2</a></li>
                <li><a href="#">目录3</a></li>
                <li><a href="#">目录4</a></li>
            </ul>
        </div>
    </body>
</html>

效果：

变化1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #header ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            #header li {
                display: inline;
                border: solid;
                border-width: 1px 1px 0 1px;
                margin: 0 0.5em 0 0;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>导航栏</h1>
            <ul>
                <li><a href="#">目录1</a></li>
                <li><a href="#">目录2</a></li>
                <li><a href="#">目录3</a></li>
                <li><a href="#">目录4</a></li>
            </ul>
        </div>
    </body>
</html>

效果：

变化2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #header ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            #header li {
                display: inline;
                border: solid;
                border-width: 1px 1px 0 1px;
                margin: 0 0.5em 0 0;
            }
            #header li a {
                padding: 0 1em;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>导航栏</h1>
            <ul>
                <li><a href="#">目录1</a></li>
                <li><a href="#">目录2</a></li>
                <li><a href="#">目录3</a></li>
                <li><a href="#">目录4</a></li>
            </ul>
        </div>
    </body>
</html>

效果：

创建选择器

// 派生选择器
h1 h2 {
}

// 标志选择器
#text {
}

// 类选择器
.da {
}

// 分组选择器

h1, #text, .da { color: blue; }

伪类：

文字字号

font-size属性的作用改变字体的大小。

常见：

  1. px；
  2. em；
  3. %。

1.像素单位px，使用像素直接定义字体的大小，是绝对单位，如12px。

2.字体大小em，一个字体的大小就是1em，在任何浏览器中，默认的字体大小都是1em。

3.百分比%，以当前文本的百分比定义的尺寸。

修饰页面文本和页面背景的属性

浏览器支持

webkit引擎的浏览器，如Safari,Chrom的私有属性的前缀是-webkit-，gecko引擎的浏览器，如Firefox的私有属性的前缀是-moz-，Opera浏览器的私有属性的前缀是-o-，IE浏览器，限于IE 8+的私有属性的前缀是-ms-。

CSS3新特性

有在属性选择符中引入通配符，灵活的伪类选择符nth-child()等。

属性选择符

^ 表示匹配起始符
$ 表示匹配结束符
* 表示匹配任意字符

CSS结构伪类选择符

CSS结构伪类选择符

伪元素选择符

文本

文本阴影

text-shadow: length || lenth || opacity || color
// text-shadow: 5px 5px 3px #333
text-shadow: -1px 0 #333, 0 -1px #333, 1px 0 #333, 0 1px #333;

文本溢出处理：

text-overflow: clip | ellipsis | ellipsis-word

// 溢出文本的省略标记
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
设置宽度，将溢出内容设为隐藏，强制文本单行显示，设置溢出文本显示为省略标记

边界换行属性：word-wrap，用于设置或索引当前行超过指定容器的边界时是否断开转行

word-wrap: normal | break-word

word-break: normal | break-all | keep-all

word-break用于设置或检索对象内文本的字内换行行为

@font-face语法规则

使用它能够加载服务器端的字体文件

@font-face: {属性:取值;}
font-family: 设置文本的字体名称
font-style: 设置文本样式
font-variant: 设置文本是否大小写
font-weight: 设置文本的粗细
font-stretch：设置文本是否横向的拉伸变形
fontsize: 设置文本字体的大小
src: 设置自定义字体的相对路径或绝对路径

opactity属性

opacity: <alpha> | inherit
// 表示不透明度，表示继承父元素的不透明度

Background

background: [background-image] | [background-origin] | [background-clip] | [background-repeact] | [background-size] | [background-position]

background-origin: border-box | padding-box | content-box

background-clip: border-box | padding-box | content-box

background-size: [<length> | <percentage> | auto] {1,2} | cover | contain

回看笔者往期高赞文章，也许能收获更多喔！

❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更好的文章

点赞、收藏和评论

我是Jeskson(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)

我们下期见！

文章持续更新，可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/#/ 已经收录

github收录，欢迎Star：https://github.com/webVueBlog/WebFamily

None

null

None

None