选择器和声明块

哈喽！咱们聊聊CSS这东西。其实，就是用这个为HTML标签整容，就像写上邮箱名后面的小备注那种感觉；再定点规矩，教浏览器怎么给选中的元素换衣服。譬如说，想把所有的段落全都染成红色，就是这么做滴：

css

p {
    color: red;
}

p {
    color: red;
}

大P就是选项本身，Color就是颜色滴意思，再加个Red，不用多说大家也都明白。

嵌入CSS和单独链接文件

好，今天咱们就一块儿学习下怎么给HTML文件加CSS样式！有两种方法，一是直接把CSS代码敲进HTML文件，二就是另建一个CSS文件，再和HTML衔接起来。我自己更喜欢用第二种，觉得这样更加清晰条理，而且同样的代码也可以用到其他HTML文件上。像这个简短的CSS代码，只要加上去，所有段落都会变成蓝色~

color: blue;

p {
    color: blue;
}

直接用编辑器把它复制出来，保存成.css文件就搞定！

常用CSS属性

别停，继续说点好用的CSS属性！想换个文字颜色？color轻松搞定；想拉近或远离元素和周围环境？margin是我们的好帮手；还有padding，用来去掉元素之间的空白线条。就是这几个看似简单却实用的功能，让你随心所欲地创作属于自己独特风格的网页设计！

页面布局控制

告诉你个秘密，用CSS就能任意修改网页布局！就靠那个display属性，调下展示方式就行。给你举个例子，给这段代码一输入，那边元素就能安分地呆在正中央不再乱跑啦:

.center {

display: flex;

justify-content: center;

align-items: center;

div {
    display: flex;
    justify-content: center;
    align-items: center;
}

看看这个展示，利用display属性就能让元素变小！然后我们好好谈谈justify-content和align-items这两个东西，用它们就能轻松搞定元素内的水平和垂直排版哟~

伪类和伪元素

给你说个事挺有意思的，“伪类”和“伪元素”这两个好帮手实在是太棒了！他们能做很多神奇的事儿，像点下鼠标就出现各种效果，还有在网页元素前面或者后面添点儿什么。像，添几行代码就让所有的链接都带上下划线，整个页面立刻变得好看多了！

a:hover {

text-decoration: underline;

使用CSS框架

听说过CSS框架？它能让做网页变得容易多了！大家都熟悉的Bootstrap就是个好用的例子，用上它，布局和风格统统搞定！只需要把Bootstrap的样式表加进去HTML文件，之后按正常用法使用HTML class和tag就行了。

a:hover, a:active {
    text-decoration: underline;
}

“`html

Click me!</button>

容器真的太实用！它不光帮咱们搞定了响应式布局，还让咱们的按钮看起来更高大上了。比如那些”btn”元素和”btn-primary”样式啥的都美滋滋的！

练习项目建议

最后聊完了！咋们来干点儿小项目呗，像是建个网站之类的。这样既能学习又能用上，我保证你肯定会越来越厉害的！

    
    
    


    

        
Hello, world!
        
This is an example using Bootstrap.
        

Click me!