CSS基础知识

概述

定义

CSS指的是层叠样式表（Cascading Style Sheets），是一种用来描述HTML文档样式的语言（给页面中的html标签设置样式）。

语法

CSS的语法规则是由选择器和声明块进行组成的。选择器 { 属性名: 属性值; } 如p { color: green;}

选择器指向需要设置样式的HTML元素，声明块表示包含一条或多条声明（声明块用花括号包裹）。每条声明都包含一个CSS属性和一个值，以冒号分隔。多条CSS声明之间用分号分隔。

 p {
    color: red;
    text-align: center;
}

p {

color: red;

text-align: center;

}

上面代码中，表示所有的p元素都将居中对齐，且文本内容为红色。

引入方式

共有三种使用CSS的方法，分别如下：

行内样式：作用于单个标签；直接给html标签添加style属性
内嵌样式：作用于单个页面；写在style标签内，style标签在head标签中
外联样式：单独的.css文件，通过link标签进行引入

<!-- 外联样式 -->
<!-- h1 {color: red} -->
<link rel="stylesheet" href="default.css">
<!-- 内嵌样式 -->
<style>
h1 {
    color: blue;
}
</style>
<!-- 行内样式 -->
<h1 style="color: skyblue">测试CSS三种使用方法</h1>

<style>

h1 {

color: blue;

}

</style>

<h1 style="color: skyblue">测试CSS三种使用方法</h1>

选择器

作用

选中页面中对应的标签，方便后续更改样式（先找后改）

分类

标签选择器

标签名 { 属性名: 属性值; }

通过标签名找到页面中所有这一类的标签，设置样式。

p {
    color: red;
}

p {

color: red;

}

不论标签嵌套层级多深，都会将一类标签添加样式

类选择器

类名 { 属性名: 属性值; }

找到页面中所有带有该类名标签，设置样式

/* 给所有class类名为center的标签添加居中样式 */
.center {
    text-align: center;
}

/* 给所有class类名为center的标签添加居中样式 */

.center {

text-align: center;

}

一个标签可以有多个类名，类名之间使用空格隔开；css结构可以同时选择多个类使用,隔开（多对多）

id选择器

#id名 { 属性名: 属性值; }

找到页面中带有id名标签，设置样式

#main {
    color: blue;
}

#main {

color: blue;

}

一个页面中只能有一个（一对一）

通配符选择器

* { 属性名: 属性值; }

找到页面中所有的标签，设置样式

* {
    margin: 0;
    padding: 0;
}

* {

margin: 0;

padding: 0;

}

大型项目中，一般不使用，可能会比较消耗浏览器的性能

https://www.w3school.com.cn/css/css_selectors.asp

字体

设置字体的样式，用font表示

字体类型

名称	作用
font-size	字体大小
font-weight	字体粗细
	关键字：normal正常；bold加粗
	纯数字：400正常；700加粗
font-style	字体样式（`normal`正常 `italic`倾斜）
font-family	字体类型

<head>
    <title>字体和文本样式</title>
    <style>
        .one {
            font-size: 20px;
            font-weight: bold;
            font-style: italic;
            font-family: 'Courier New', Courier, monospace;
            /* 样式生效 */
            font-weight: normal;
        }

        .two {
            font: italic bold 20px 'Courier New', Courier, monospace;
        }
    </style>
</head>

<body>
    <div class="one">这是第1个句子</div>
    <div class="two">这是第2个句子</div>
</body>

<head>

<title>字体和文本样式</title>

<style>

.one {

font-size: 20px;

font-weight: bold;

font-style: italic;

font-family: 'Courier New', Courier, monospace;

/* 样式生效 */

font-weight: normal;

}

.two {

font: italic bold 20px 'Courier New', Courier, monospace;

}

</style>

</head>

<body>

</body>

存在的问题

层叠问题：当一个选择器内设置了多个同名属性的样式，最底下的样式生效
连写问题
- 连写的顺序：font: style weight size family (swsf 稍微舒服)
- 可省略的选项：前两个可以省略 [style weight] size family

背景属性

设置背景样式，用background表示

名称	作用
background-color	背景颜色（颜色常见的几种表示）
background-image	背景图片：url(图片路径)
background-repeat	背景平铺
	repeat 平铺
	no-repeat 不平铺
	repeat-x 沿着水平方向平铺
	repeat-y 沿着垂直方向平铺
backgroup-position	背景位置
	方位名词（最多只能表示9个位置九宫格）水平方向： left center right 垂直方向： left center right
	数字+px（坐标）在一个块级元素中，元素的左上角为原点（0,0），水平向右是x轴，垂直向下是y轴。由此组成的一个二维坐标系进行设置。

<head>
    <style> 
        .one {
            width: 500px;
            height: 500px;
            background-color: red;
            background-image: url(../../static/img/small.jpg);
            background-repeat: no-repeat;
            /* background-repeat: repeat-y; */
            /* background-position: left center; */
            background-position: 20px 0;
        }
    </style>
</head>

<body>
    <div class="one"></div>
</body>

<head>

<style>

.one {

width: 500px;

height: 500px;

background-color: red;

background-image: url(../../static/img/small.jpg);

background-repeat: no-repeat;

/* background-repeat: repeat-y; */

/* background-position: left center; */

background-position: 20px 0;

}

</style>

</head>

<body>

</body>

连写顺序：color image repeat position

元素显示模式

三种显示模式

元素模式	特点	代表标签
块状元素	独占一行；宽度默认占满一行，高度默认由内容撑开；可以设置宽高	div,p,h系列标签
行内元素	一行可以显示多个；宽度和高度默认都是由内容撑开；不可以设置宽高	a,span
行内块元素	一行可以显示多个；可以设置宽高	input

三种模式转换

使用 display进行转换

转换块状元素 display: block;
转换行内元素 display: inline;
转换行内块元素 display: inline-block;

嵌套规范

a标签不能嵌套a标签
p标签不能嵌套div等块级元素

三大特性

继承性

子承父业：子元素默认会继承父元素样式的效果

层叠性

给同一个标签设置相同属性时，样式会覆盖，只有最底下的属性会生效；给同一个标签设置不同属性时，样式会叠加，属性会共同作用于标签。

只有当优先级相同时，才会出现层叠性

优先级

权重大小排序：!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承
!important不能提升继承的优先级，只要是继承，优先级则最低

权重计算（0,0,0,0）

0,0,0,0 从左往右表示：

第1位代表行内样式的个数；
第2位代表id选择器的个数；
第3位代表类选择器的个数；
第4位代表标签选择器的个数。

当权重相同时，则比较层叠性。

盒子模型

一个盒子模型的组成结构如下：

CSS基础知识

内容content：width和height默认设置的是内容部分的宽高
边框border：围绕内边距和内容的边框。
内边距padding：清楚内容周围的区域，内边距是透明的。
外边距margin：清楚边界外的区域，外边距是透明的。

边框

指定元素的样式、宽度和颜色，用border表示

名称	作用
border-width	边框粗细
border-style	边框样式
	solid 实线
	dashed 虚线
	dotted 点线
border-color	边框颜色

特殊现象

margin的合并现象：垂直布局的盒子，此时上下的margin会合并。取两者间最大的margin值。

margin的塌陷现象：互相嵌套的块级元素，父子元素的margin-top会被合并共同作用在父元素上面。解决方法如下：

添加 padding-top值;
设置 overflow: hidden;
设置行内块样式 display: inline-block;
设置浮动 float: left。

margin和padding布局（注意是布局，不是生效）对行内元素水平方向生效，垂直方向则无效！

定位属性

设置元素位置，用position表示

属性名	特点
静态定位 static	标准流中的元素默认就是静态定位；不能配合方位实现移动
相对定位 relation	需要配合方位实现移动；相对于自己原来的位置进行移动；占位置、没有脱标
绝对定位 absolute	需要配合方位实现移动；位置分情况；不占位置、已经脱标（脱标之后的元素，宽度默认由内容撑开）
固定定位 fixed	需要配合方位实现移动；永远相对于浏览器进行移动；不占位置、已经脱标（脱标之后的元素，宽度默认由内容撑开）

应用场景

让子元素相对于父元素移动：子绝父相
水平垂直居中
- 子绝父相
- 同时给子元素设置 left: 50%;top: 50%; transform: translate(-50%, -50%)

装饰属性

垂直对齐方式

设置元素垂直对齐方式，使用vertical-align表示

光标类型

设置鼠标光标类型，使用cursor表示

边框圆角

设置边框圆角，使用border-radius

overflow

元素本身隐藏属性

颜色

指定颜色是通过使用预定义的颜色名称，或RGB、RGBA、HEX、HSL、HSLA的值。颜色可作用于背景、文本、边框等。

RGB颜色

RGB颜色值指的是rgb(red, green, blue)，每个参数定义了0到255之间的颜色强度。

RGBA颜色值指的是rgba(red, green, blue, alpha)，alpha表示透明度，是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。
HEX颜色

HEX颜色指的是使用十六进制指定颜色。rrggbb其中rr（红色）、gg（绿色）和bb（蓝色）是介于00和ff之间的十六进制值。
HSL颜色

HSL涉及到颜色的色相、饱和度和明度……

原创文章，作者：seabert，如若转载，请注明出处：https://bysjb.cn/css.html

CSS基础知识

概述

定义

语法

引入方式

选择器

作用

分类

标签选择器

类选择器

id选择器

通配符选择器

字体

字体类型

存在的问题

背景属性

元素显示模式

三种显示模式

三种模式转换

嵌套规范

三大特性

继承性

层叠性

优先级

盒子模型

边框

特殊现象

定位属性

装饰属性

垂直对齐方式

光标类型

边框圆角

overflow

颜色

相关推荐

css解决多个span间的间距问题

了解Flex布局

发表回复