2022-07-10 第一组 吕政洋 CSS:

目录

• 目录
• 1. css层叠样式表
• 2. css选择器
• 3. css常用单位
• 4. 背景颜色
• 5. 列表

目录

1. css层叠样式表

2. css选择器

3. css常用单位

4. 背景颜色

5. 列表

1.css层叠样式表： 层叠性:1.如果样式冲突，遵循就近原则
2.如果样式不冲突，就不层叠
继承性:子标签会继承父标签的某些样式，文本颜色字号背景。

2.css选择器： 1.标签选择器*
2.类选择器：class
3.id选择器：id="____"
4.伪类选择器🔗hover:active:visited
默认样式： a:link{color...

点击查看代码

<style>
        div{
            /*字体大小*/
            font-size:100px;
            /*字体样式*/
            font-family:'微软雅黑';
            /*行高*/
            line-height:200px;
            /*粗细*/
            font-weight:bold;
            /*字体*/
            text-decoration:underline
        }
        a:link{
            text-decoration:none;
            color:black;
        }
            a:hover
            {
            text-decoration:underline;
            color:blue;
        }
    </style>

鼠标悬停： a:hover{color... 元素被激活：a.active{color... 点过的链接：a.visited{color... 5.nth-child():选中第几个对应元素 6.:checked:选中所有被选中的的元素

点击查看代码

  <style>
        /*根据标签来命名*/
        /*选择器selector*/
        /*标签选择器可以让页面上所有的p标签都有对应的样式*/
        p{
             background:red;
    }
        span{
            background:pink;  
        }
        /*声明一个样式，并起个名字*/
        /*类选择器*/
        /*标签选择器和类选择器哪个优先级高*/
        .bg{
            background:blue;
        }
        /*id选择器*/
        #spring{
            background:purple;
        }
    </style>

**3.css常用单位:**1.px像素:绝对单位，一个像素代表一个点。 2.em是相对单位，他会参照他的父级元素，字体。 3.rem:相对单位，由页面决定，改变浏览器的字号，页面随之变化 4.百分比，相当于父级元素的比例。 **4.背景颜色:**backgroung_color:______; 背景图片：backgroung_image:url(img/123.png);

点击查看代码

<style>
        div{
            height:200px;
            width:200px;
            background-color:green;
            border-style:dotted;
            border-width:5px;
            border-color:yellow;
            border:red solid 1px;
            border-bottom:1px yellow double;
        }
    </style>

**5.列表:** 清除浮动 盒子模型：盒子水平居中:margin:"auto" ###学习了css，对于浮动盒子模型不是特别了解，别的地方还是很熟悉的，但是我觉得我会越做越熟练