CSS设置

1.CSS概述和选择器

CSS指的是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言，是描述标记语言页面格式的标准。CSS使开发人员能够分离内容和可视元素，以实现更好的页面控制和灵活性。

层叠：层叠指的就是样式的优先级，当产生冲突时以优先级高的为准。

作用：用来美化网页的。

语法规则：

选择器{

声明块

}


2.CSS引入方式

行内样式：<p style="background-color: blue;">这是p标签</p>

内部样式：在head标签中，用style标签进行包裹样式书写。

span { background-color: red; }

外部样式：需要在head标签中进行引入 新建的CSS样式文件，标签名link。

例如：<link rel="stylesheet" href="./选择器.css">


3.CSS选择器


基础选择器有：


元素选择器：是以标签名作为选择器

在body里面写：

<span>span - 标签选择器</span>

在head里面的style里面写：


span {
            background-color: red;
        }


Id选择器：适用于单个标签添加样式，作为选择器的时候， id名前加上 #

在body里面写：

<div class="title" id="third" style="background-color: yellow;">这是第三个div</div>


在head里面的style里面写：


#third {
            background-color: black;
        }


Class选择器：适用于同样样式较多标签的时候， 作为选择器的时候，类名前加上 .

在body里面写：

<div class="title">这是第一个div</div>


在head里面的style里面写：


.title {
           width: 100px;
           height: 100px;
           background-color: pink !important;
        }


通配符选择器：*号

* {
            background-color: #ccc;
        }


复合选择器有：

后代选择器：用空格隔开


ul li div p {
            /* 1+1+1+1 */
            /* background-color: yellowgreen; */
        }


<ul>
        <li>
            <div>
                <p>这是后代的 p标签</p>
            </div>
        </li>
        <li></li>
    </ul>


父子选择器：用 > 连接


ul>li>div>p {
            /* 1+1+1+1 */
            /* background-color: gray; */
        }


4.常用字体属性：

font-family：指定字体类型

font-size：文本字体大小

font-style：文本字体样式

font-weight：文本字体粗细

font：在一个声明中设置所有的字体属性

5.图标字体使用：

第一步：进入bootstarp 的官方文档，选择v3的版本文档进行查阅 。

第二步：找到入门选项，复制 基本模板 处的HTML代码，我们在使用框架或插件的时候，需要引入该框架的 底层css文件以及js文件。而后才能正常使用相关的内容。

第三步：回到组件选项，选择对应需要使用的字体图标。

6.常用文本属性：

color：文本颜色

text-align：对对齐元素中的文本

text-decoration：向文本添加修饰

line-height：设置行高

7.其他常用样式：

width：元素的宽度

height：元素的高度

background：背景颜色

opacity：元素透明度

overflow：指定如果内容溢出一个元素框，则可以隐藏