css基础

最新推荐文章于 2024-10-09 19:16:55 发布

G懒猫

最新推荐文章于 2024-10-09 19:16:55 发布

阅读量57

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_66843764/article/details/131709104

版权

一、css基本使用

1.css概述

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

多个样式定义可层叠为一个

2.css作用

css是可以把页面布局，字体布局，背景颜色，字体颜色修改的，就好比毛坯房和精装房的区别。HTML可以把网页的元素铺出来，css把HTML页面进行美化。

二、css基本样式

文档流的顺序：上左下右

行级标签：按照文档流的顺序依次排列

排列块级标签：独占一行

1.css基本语法

<style>
    h1{
        color: blue;
        font-size: 14px;
      }
</style>

2.基本样式

宽：width:100px;

高：height:100px;

背景颜色：background-color: aqua;

注意：行级标签设置的宽高不起作用，行级标签的宽高根据内容的大小自适应。

<style>
    h1{
        color: blue;
        width: 200px;
        height: 100px;
        background-color: red;
      }
</style>

3. 注释

css注释以 /* 开始，以 */ 结束。

三、css引入方式

1. 内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素

<div style="background: red"></div>

2. 嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

3. 外联式Linking（也叫外部样式）：将网页链接到外部样式表

<link rel="stylesheet" type="text/css" href="style.css">

四、css样式表优先级

（嵌入样式）Inline style > （内联样式）Internal style sheet >（外联样式）External style sheet > 浏览器默认样式

上面我们介绍到三种引入样式的方式，这三种样式可重叠使用，即可以在使用外联样式的同时使用内页样式，同时可在行内标注。

外联样式（设置公用样式文件，统一各个页面风格）

内页样式（设置页面样式，统一页面各同类项风格）

行内样式（设置单独样式，如强调不同颜色、不同字体大小等）

五、css选择器

1. 全局选择器 *

*{
    padding: 0;
    margin: 0;
}

2. 标签选择器

p {
  color: blue;
}

3. 类选择器

.highlight {
  background-color: yellow;
}

4. id 选择器

#runoob {
  width: 200px;
}

5. 群组选择器

<style>
    b,p,span{
        color: coral;
    }
</style>

6. 层次选择器

后代选择器空格

div p {
    background-color:yellow;
}

子代选择器 >

div>p{
    background-color:yellow;
}

相邻兄弟 +

div+p{ 
    background-color:yellow;
}

通用兄弟 ~

p~ul{
    background:#ff0000;
}

7. 伪类选择器

a:hover{ 
    background-color:yellow;
}

8. 属性选择器

[title]{
    color:blue;
}

六、选择器优先级

优先级顺序：

下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

全局选择器（*） < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式 < !important

当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖 CSS 中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important 规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

权重计算：

内联样式表的权值最高 1000

ID 选择器的权值为 100

Class 类选择器的权值为 10

HTML 标签选择器的权值为 1

优先级法则：

选择器都有一个权值，权值越大越优先；

当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；

继承的 CSS 样式不如后来指定的 CSS 样式；

在同一组属性设置中标有 "!important" 规则的优先级最大；

G懒猫

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫