CSS基础知识，持续更新

最新推荐文章于 2024-07-25 15:07:09 发布

csdn___CZ

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量69

点赞数

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/u012613869/article/details/113850070

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS

层叠样式表
网页实际是一个多层的结构，通过CSS可以分别为网页的每一个曾来设置样式，而最终我们能看到的只是最上边一层
CSS用来设置网页中元素的样式

一、样式表选择

第一种方式（内联方式、行内样式）

在标签内部通过style属性来设置元素的样式
问题：使用内联样式，只能对一个标签生效，如果希望影响到多个元素必须在每个元素中都复制一遍，而且样式改变时，需要一个一个去修改
注意：开发时绝对不要使用内联样式

<p style="color: blue;">内联样式</p>

第二种方式（内部样式表）

将样式别写到head中style标签里
然后通过CSS的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，只需修改一处即可全部应用
- 内部样式表更加方便对样式进行复用
- 问题：只能对一个网页起作用，不能跨网页使用

<head>
	<style>
		 p {
            font-size: 50px;
        }
	</style>
</head>

第三种方式（外部样式表）

可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件
将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验

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

默认样式

通常情况，浏览器会为元素设置一些默认样式，但是每个浏览器的默认样式可能不同，而且影响布局
一般的样式需要通过*{margin:0;padding:0;}进行清除样式，但是有的标签清除不完全
重置样式表：
reset.css 直接去除浏览器的默认样式
normalize.css 对默认样式进行了统一
HTML重置样式代码

二、选择器

CSS的基本语法：
选择器声明块：#id{}
1. 选择器：通过选择器可以选中页面中的指定元素
2. 声明块：通过声明块来指定要为元素设置的样式
选择器selectors

id选择器：#id
类选择器：.class
元素选择器(标签）：p
1.通配符选择器：*所有元素
2.交集选择器：选择器1选择器2选择器3{}
注意：交集选择器中如果有元素选择器，必须使用元素选择器开头
3.分组选择器：选择器1,选择器2。作用：同时选择多个选择器对应的元素
4.父子选择器：body > p，选择body下一级所有p标签
5.后代选择器：body p，选择body下所有的p标签
6.兄弟选择器：p+h5，和p同级别的第一个h5会发生变化
7.所有兄弟选择器：p+h5，和p同级别的所有h5会发生变化
属性选择器：[title]{ }或者[title=asdf]{ }或者[title^=asd]{asd开头的元素 }或者[title$=asd]{asd结尾的元素 }或者[title*=as]{ }
伪类（不存在的类）选择器：body>p:first-child {}
- 用来描述一个元素的特殊状态，一般情况下以：开头
- :first-child(取值范围：所有子元素):first-of-type（取值范围：同类型元素）:not(:nth-child(1))
- a:link(未访问过的链接)，a:visited（访问过的链接，只能改颜色），a:hover(鼠标移入时)，a:active(鼠标点击时)
伪元素选择器：
- p::first-letter（第一个字母）::first-line（第一行）::selection(选中的内容)::before（元素的开始）::after(元素的最后)[before和after需要结合contant使用，且无法选中]
选择器权重（类选择器不会超过id选择器，优先级相同时，选择位置下边的样式）：
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配符选择器 0,0,0,0
继承的样式没有优先级
样式 !important，超过内联样式的最高优先级

三、长度单位

像素：计算机屏幕上所能显示的最小单位
百分比
em：1em=1font-size，根据自身字体大小改变而改变
rem：根据html字体大小改变而改变

四、颜色单位

RGB值：
- R red,G green,B blue
- 每种颜色的范围(0~255)
- 语法，RGB(红色，绿色，蓝色)
RGBA值：
- A表示透明
- 取值范围(0~1)
- 语法，RGB(红色，绿色，蓝色,.5)
十六进制的RGB值：
- 语法：#红色绿色蓝色
- 颜色浓度通过00~FF
HSL值 HSLA值
- H色相(0_{360)，S饱和度(0%}100%)，L亮度(0%~100%)

background-color: rgb(red, green, blue);

五、文档流

文档流：网页时一层叠加一层的，最底下的一层称为文档流
1. 对于我们来说元素主要有两个状态
2. 在文档流中
3. 不在文档流中
- 元素在文档流中有什么特点：
  - 块元素：1.独占一行 2.默认宽度（父元素的全部） 3.默认高度（与内容高度相同）
  - 行内元素：1.自身大小 2.水平排列 3.行内元素的宽度和高度（与内容相同）

盒子模型

CSS将页面中的所有元素都设置为一个矩形的盒子
将元素设置为矩形后，页面的布局就是摆放盒子
盒子的组成：contant（内容区）、padding（内边距）、border（边框）、margin（外边距）

内容区：width和height设置的是内容区的大小
边框：宽度border-width，颜色border-color，样式border-style
- border-width:上，右，下，左；上，左右，下；上下，左右；
- border-color:上，右，下，左；上，左右，下；上下，左右；
- border-style:solid实线、dotted点状虚线、dashed虚线、double双线
内边距padding：内容区和边框之间的距离
- 内边距设置影响盒子大小，颜色会延伸到内边距上
可见框=边框+内边距+内容区
- box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）
  content-box：默认值，宽度和高度用来设置内容区的大小
  border-box：宽度和高度用来设置整个盒子可见框大小
- 外边距margin：不会影响可见框大小，但是影响盒子的位置
- 兄弟元素：垂直外边距会发生重叠现象
- 父子元素：当父元素没有外边距时，子元素和父元素共用外边距

父元素内容区的宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
200 = 0 + 0 + 0 + 100 + 0 + 0 + 0
以上等式必须满足，在这七个值中没有设置auto值时，浏览器会自动调整margin-right
200 = 0 + 0 + 0 + 100 + 0 + 0 + 100
width、margin-left、margin-right：这三个值可以设置为auto，设置为auto的属性会自动调整
注意：
- 默认情况下父元素的高度被内容撑开
- 当子元素的大小超过了父元素，则子元素会从父元素中溢出
- overflow：属性来处理溢出的问题
- visible：不处理
- hidden：溢出的内容被裁减
- scroll：生成两个滚动条，查看完整内容
- auto：根据需要生成滚动条

.outer {
			width: 200px;
            height: 200px;
            border: 1px black solid;
            padding: 100px;
            box-size:border-box;
        }

行内元素的盒子

行内元素不支持设置宽度和高度
行内元素可以设置padding、border、margin，但垂直方向不会影响布局
display: 用来设置元素显示的类型
- inline 将元素设置为行内元素
- block 将元素设置为块元素
- inline-block 将元素设置为行内块元素
- none 元素不在页面中显示
visibility:用来设置元素的显示状态
- visible：元素在页面中正常显示
- hidden：元素在页面中隐藏，但依然占据页面位置

盒子的阴影效果

box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局

第一个值：水平偏移量，正值向右移动，负值向左移动
第二个值：垂直偏移量，正值向下移动，负值向上移动
第三个值：阴影模糊半径
第四个值：阴影的颜色

.s1 {
		width: 100px;
        height: 100px;
        background-color: blue;
        box-shadow: 10px 10px 10px rgba(226, 20, 20, .3);
       }

设置盒子圆角

border-radius:用来设置圆角

border-radius：可以分别指定盒子的四个角
四个值：左上、右上、右下、左下
三个值：左上、右上\左下、右下
两个值：左上\右下、右上\左下

.s1 {
		width: 100px;
        height: 100px;
        background-color: blue;
        border-radius: 10px;
       }

csdn___CZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识，持续更新

CSS层叠样式表网页实际是一个多层的结构，通过CSS可以分别为网页的每一个曾来设置样式，而最终我们能看到的只是最上边一层CSS用来设置网页中元素的样式一、样式表选择第一种方式（内联方式、行内样式）在标签内部通过style属性来设置元素的样式问题：使用内联样式，只能对一个标签生效，如果希望影响到多个元素必须在每个元素中都复制一遍，而且样式改变时，需要一个一个去修改注意：开发时绝对不要使用内联样式<p style="color: blue;">内联样式</p>
复制链接

扫一扫