CSS学习信息汇总

目录

1.引入方式

行内样式表

内部样式表

外部样式表

2.字体属性

3.文本属性

4.复合选择器

后代选择器

子代选择器

并集选择器

伪类选择器

​

1.引入方式

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混乱	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构与样式相分离	需要引入	最多	控制多个页

• 行内样式表

<p style="color: red;">这是一个字体属性的测试</p>

• 内部样式表

<style>
        p {
            color: #ff5e00d3;
            text-align: left;
            text-indent: 2em;
            text-decoration: underline;
            line-height: 20px;
        }
</style>

• 外部样式表

<link rel="stylesheet" href="normal.css">

2.字体属性

属性	说明	注意点
font-size	字体大小	需要跟上单位px
font-family	字体风格	根据公司要求来，一般都是微软雅黑
font-weight	字体粗细	加粗是bold或者700，不加粗是normal或者400，不用加单位
font-style	字体样式	倾斜是italic，不倾斜是normal
font	字体连写	1.连写是有顺序的2.字号和字体必须同时出现

<style>
        p {
            /* font-style: italic;
            font-weight: bold;
            font-size: 30px;
            font-family: '微软雅黑'; */
            font: italic bold 30px '微软雅黑';
        }
</style>

3.文本属性

属性	说明	注意点
color	文本颜色	通常使用十六进制来表示，比如#ff5e00d3
text-align	文本对齐	对齐方式：left、center、right
text-indent	文本缩进	通常用于段落首行缩进，2em代表2个字符的距离
text-decoration	文本修饰	添加下划线：underline，取消下划线：none
line-height	行高	控制行与行之间的距离，本质是通过调整文字上下的间距来实现的

<style>
        p {
            color: #ff5e00d3;
            text-align: left;
            text-indent: 2em;
            text-decoration: underline;
            line-height: 20px;
        }
</style>

4.复合选择器

可以根据选择器的类型分为基础选择器和复合选择器。复合选择器是建立在基础选择器之上的，是基础选择器进行组合形成的。

常用的复合选择器包括：后代选择器、子代选择器、并集选择器、伪类选择器。

• 后代选择器

        又被称为包含选择器，可以选择父元素里面的子元素以及所有的后代元素。

        语法：元素1 元素2 { 样式声明 }

<style>
        ul li {
            color: red;
        }
</style>

        注意：

        元素1和元素2中间需要用空格进行隔开。

        元素1是父级，元素2是子集，最终选择的是元素2。

        元素2可以是子元素，也可以是孙子元素，只要是元素1的后代即可。

• 子代选择器

        只能选择对应元素最近的一级子元素。

        语法：元素1>元素2 { 样式声明 }

<style>
        div>a {
            color: red;
        }
</style>

        注意：

        元素1和元素2中间用大于号隔开。

        元素1是父级，元素2是子集，最终选择的是元素2。

        元素2必须是亲儿子，其孙子之类的都不归他管。

• 并集选择器

        可以选择多组标签，为他们定义相同的样式。

        语法：元素1,元素2 { 样式声明 }

<style>
        p,
        h5 {
            color: blue;
        }
</style>

        注意：

        元素1和元素2中间用逗号隔开。

• 伪类选择器

        链接伪类选择器

                注意：

                为了确保生效，请按照LVHA的顺序进行声明，:link :visited :hover :active。

<style>
        /* a:link 还未点击过的链接 */
        a:link {
            color: black;
        }

        /* a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /* a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* a:active 选择的是鼠标正在按下但是还没有松开的链接 */
        a:active {
            color: green;
        }
</style>

      focus伪类选择器

        在元素获得焦点时向元素添加特殊的样式。

<style>
        #userName:focus {
            color: red;
        }
</style>