2022-7-10 第八小组顾宇佳学习笔记（CSS）

最新推荐文章于 2024-10-18 19:12:03 发布

haha姐

最新推荐文章于 2024-10-18 19:12:03 发布

阅读量97

点赞数

文章标签：大数据 css 前端

本文链接：https://blog.csdn.net/m0_46536570/article/details/125761577

版权

CSS---层叠样式表，相当于整个网页的美化

一、定义CSS样式的方式

行内样式（内联样式）

·行内样式仅针对当前标签生效，如果当前的样式不需要复用，可以用行内样式
·优先级高（优先级比内页样式的优先级高，如果同时存在，先显示行内样式）

2.内页样式（嵌入样式）

·声明一个样式：在head标签中style中声明

给样式起名：

A：标签选择器（根据标签命名）

B：类选择器

声明样式的时候需要用一个英文的“.”，选择样式通过class属性，class属性里不写“.”

C：id选择器（id：在当前页面的唯一标识，不能重复）

声明样式需要一个“#”，对应的元素的id要匹配

3.外部样式（推荐）

二、CSS选择器

标签选择器
类选择器：一个标签元素是可以选择多个样式，样式名中间用空格隔开
Id选择器
选中页面上所有的标签（div,p）

选中div里面的p（无论嵌套多少层，都可以找到）（div p）

选中div里面的直接子标签（div>p）

选中紧跟着div的p（div+p）

8. 选中页面上所有带有type属性的标签（[type]）

9.选中页面上所有带有type=text属性的标签（[type=name]）

10.选中页面上type属性包含某个单词的所有元素（[type~=t]）

11.伪类选择器（link，hover，active，visited）

12.选中第几个对应的元素（nth:child()）

13.选中所有被选中的元素（:checked）

三、CSS层叠样式表

1.层叠性：如果样式冲突，遵循就近原则，哪个样式离结构近就执行哪个样式；如果样式不冲突，就不层叠，直接用

2.继承性：子标签会继承父标签的某些样式，（文本的颜色、字号、背景颜色等）

3.权重（优先级）：

优先级：类>标签>id

（1）继承的权重最低

（2）行内样式的权重最高

（3）如果权重相同，就近原则

（4）！Important改变权重（无限大）

四、CSS常用的单位

px 像素（绝对单位）一个像素代表一个点。
em （相对单位）会参考它的父级元素，设计字体时用的较多。父级元素的字体是16px，要设置元素的字体大小为2em，当前元素的字体大小就是32px。
rem （相对单位）由页面决定。当我们改变了浏览器的字号设置时，页面的字号也会随之发生变化。应用在老人版电子设备。
% 百分比（相对单位）相对于父级元素的比例。

五、鼠标样式

 /* 默认样式 */
        a:link {
            color: red;
        }
        /* 鼠标悬停样式 */
        a:hover {
            color: green;
        }
        /* 元素被激活 */
        a:active {
            color: blue;
        }
        /* 点过的链接 */
        a:visited {
            color: gray;
        }

六、区块属性

<title>区块属性</title>
    <style>
        div {
            height: 300px;
            width: 300px;
            background-color: yellow;
            /* 显示方式：行级 */
            display: inline;
        }
        span {
            height: 200px;
            width: 200px;
            background-color: skyblue;
            /* 内联块 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
</body>

七、盒子模型（掌握不好）

 <title>盒子模型</title>
    <style>
        .div1 {
            /* 
                盒子模型：
                width、height：表示内容区的宽和高
                margin：外边距。元素距离上一个元素的位置
                padding：内边距。本元素内部空出的距离
                border：边框线
            */
            height: 300px;
            width: 300px;
            background-color: yellow;
            padding: 50px;
            /* margin-top: 100px; */
            border: 10px black solid;
            /* 设置盒子模型的尺寸计算方式 */
            box-sizing: border-box;
        }
        .div2{
            height: 300px;
            width: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="div2">我是div2</div>
    <div class="div1">我是div1</div>
</body>

八.定位

定位：

absolute：绝对定位

当前的文档流可以理解为上天了,

参照物是已经定位的父级元素

relative：相对定位

参照物是已经定位的父级元素

占有原有位置，不会上天

父相子绝

static：文档流（默认）

fixed：浮动

溢出样式

hidden：隐藏

scroll：滚动条

visible：显示（默认）