web前端03CSS部分基础内容

最新推荐文章于 2024-07-08 18:51:22 发布

abigele

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量88

点赞数

分类专栏：前端学习文章标签：前端 css css3

本文链接：https://blog.csdn.net/abigele/article/details/120535979

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

为网页添加样式

术语解释

 h1{
            color:red;
            background-color:green;
            text-align:center;
        }

CSS规则=选择器+声明块

选择器

选择器：选中元素
1.ID选择器：选中的是对应id值的元素

<head>
···
<style>
    #test{
            color:seagreen;
        }
</style>
<body>
      <p id="test">Explicabo veniam omnis nobis quae, animi asperiores amet consequuntur porro sapiente at assumenda repellat dolor consectetur tenetur est sed pariatur nisi! Sed aliquid minus suscipit ipsa fugit, porro totam earum?</p>

</body>

2.元素选择器

<head>
···
<style>
h1{
            color:red;
            background-color:green;
            text-align:center;
        }
</style>
</head>
<body>
    <h1 class="red">
        为网页添加合适的样式！
    </h1>
</body>

3.类选择器（最广泛使用）

<head>
···
<style>
.red{
            color:seagreen;
            background-color: pink;
        }
         </style>
</head>
<body>
<h1 class="red">
        为网页添加合适的样式！
    </h1>
    <p class="red"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam atque ab labore vitae minima nihil magnam, officia soluta, iusto laboriosam molestiae beatae modi quidem veniam officiis debitis. Amet, eius veniam!</p>
    <p id="test">Explicabo veniam omnis nobis quae, animi asperiores amet consequuntur porro sapiente at assumenda repellat dolor consectetur tenetur est sed pariatur nisi! Sed aliquid minus suscipit ipsa fugit, porro totam earum?</p>
    <p>Sapiente atque, odio consequuntur quas nam repellat dolor nostrum obcaecati harum repellendus enim explicabo commodi eligendi ratione asperiores nihil reprehenderit facilis suscipit ipsum temporibus! Doloribus cum enim modi assumenda veritatis.</p>

</body>

声明块

出现在大括号中。
声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面额样式。

CSS代码书写位置

1.内部样式表
书写在style元素中

2.内联样式表，元素样式表
直接书写在元素的style属性中

3.外部样式表【推荐使用】
将样式书写到独立的css文件中

推荐使用的原因：
1）外部样式可以解决多页面样式重复问题
2）有利于浏览器缓存，从而提高页面响应速度
3）有利于代码分离（HTML与CSS），更容易阅读和维护

常见样式声明

color

元素内部的文字颜色
预设值：定义好的单词
三原色，色值：光学三原色（红、绿、蓝）每个颜色可以使用0-255之间的数字来表达

rgb表示法
rgb(00，255，0)
hex（16进制）表示法
#红绿蓝

淘宝红：#ff4400，f40
黑色：#000000，#000
白色：#ffffff，#fff
红：#ff0000，#f00
绿：#00ff00，#0f0
蓝：#0000ff，#00f
紫：#f0f
青：#0ff
黄：#ff0
灰色：#ccc

background-color

元素背景颜色

font-size

元素内部文字的尺寸大小
1）px；像素，绝对单位，简单的理解为文字的高度占多少个像素
2）em：相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。

user agent，UA，用户代理（浏览器）

font-weight

文字粗细程度，可以取值数值，可以取值为预设值

strong元素，默认加粗

font-family

文字类型

必须用户计算机中存在的字体才会有效

使用多个字体，以匹配不同环境

sans-serif，非衬线字体

font-style

字体样式，通常用它设置斜体

i元素，em元素，默认样式，是倾斜字体；实际使用中，通常用它表示一个图标（icon）

text-decoration

文本修饰，给文本加线。

a元素
del元素：错误内容
s元素：过期内容

text-indent

首行文本缩进

line-height

每行文字的高度，该值越大，每行文本的距离越大

设置行高为容器的高度，可以让单行文本垂直居中

行高可以设置为纯数字，表示相对于当前元素的字体大小

width

宽度

height

高度

letter-sapce

文字间隙

text-align

元素内部文字的水平排列方式

选择器

选择器：帮助你精准的选中想要的元素

简单选择器

ID选择器

元素选择器

类选择器

通配符选择器

*，选中所有元素

属性选择器

根据属性名和属性值选择元素

伪类选择器

选中某些元素的某种状态

link：超链接未访问时的状态

visited：超链接访问过后的状态

hover：鼠标悬停状态

active：激活状态，鼠标拿下状态

如果四个都要书写，必须安装上面的顺序
爱恨法则：love hate

伪元素选择器

生成并选中某个元素内部的第一个子元素或最后一个子元素

<p>
        老师的<span>HTML和CSS</span>课程真不错！
    </p>

before

span::before{
    content:"《";
    color: tomato;
}

after

span::after{
    content: "》";
    color:violet;
}

选择器的组合

并且

后代元素- 空格

子元素 - >

相邻兄弟元素 - +

后面出现的所有兄弟元素 - ~

选择器的并列

多个选择器，用逗号分隔

语法糖

层叠

声明冲突：同一个样式，多次应用到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

1.比较重要性

作者样式表：开发者书写的样式
重要性从高到低
1）作者样式表中的！important样式
2）作者样式表中的普通样式
3）浏览器默认样式表中的样式

2.比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个4位数（xxxx）

1.千位：如果是内联样式，记作1，否则为0

2.百位：等于选择其中所有ID选择器的数量

3.十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量

4.个位：等于选择器重所有元素选择器、伪元素选择器的数量

3.比较源次序

代码书写靠后的胜出

应用

1、重置样式表

书写一些作者样式表，覆盖浏览器的默认样式表

重置样式表 -> 浏览器的默认样式表

常见的重置样式表：normalize.css、reset.css、meyer.css

2、爱恨法则

link > visited > hover > active

继承

子元素会继承父元素的某些CSS属性

通常，跟文字内容相关的属性都能被继承

属性值的计算过程

浏览器渲染页面，是一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件：该元素的所有CSS属性必须有质

一个元素，从所有属性都没有值，道所有的属性都有值，这个计算过程，叫做属性值计算过程

1.确定声明值

参考样式表中没有冲突的声明，作为CSS属性值

2、层叠冲突

对样式表中有冲突的声明使用层叠规则，确定CSS属性值

3、使用继承

对仍然没有值的属性，若可以继承，则继承父元素的值

4、使用默认值：

对任然没有值的属性，使用默认值

特殊的两个CSS取值：
-inherit：手动（强制）继承，将父元素的值取出应用到该元素

-initial：初始值，将该属性设置为默认值

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
1、行盒，display等于inline的元素
2、块盒，display等于block的元素

行盒在页面中不换行、快盒独占一行

浏览器默认样式表设置的块盒：容器元素、h1~h6、p

常见的行盒：span、a、img、video、audio

盒子的组成部分

无论是行盒还是块盒，都由下面几个部分组成，从内到外分别是：

1.内容 content

2.填充 padding

3.边框 border

4.外边框 margin

abigele

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端03CSS部分基础内容

CSS基础内容为网页添加样式术语解释选择器声明块CSS代码书写位置常见样式声明color为网页添加样式术语解释 h1{ color:red; background-color:green; text-align:center; }CSS规则=选择器+声明块选择器选择器：选中元素1.ID选择器：选中的是对应id值的元素<head>···<style> #test{
复制链接

扫一扫