CSS基础

m0_70617074

已于 2022-08-25 10:46:08 修改

阅读量220

点赞数

分类专栏： html5+CSS 文章标签： css 前端 html

于 2022-08-22 17:01:39 首次发布

本文链接：https://blog.csdn.net/m0_70617074/article/details/126425621

版权

html5+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

CSS规则由2个主要的部分构成：选择器以及一条或多条声明

选择器是用来选择标签的

一、基础选择器

1.标签选择器

语法：

标签 {属性：属性值｝

优点：能够为页面同类型的标签快速设置样式

缺点：不能设置差异化样式

２．类选择器

口诀：样式点定义，结构类调用，一个或多个，开发最常用

语法

．类名｛属性：属性值｝

２．１多类名　类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .font35 {
            font-size: 35px;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="red font35">刘冰</div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>

３．ｉｄ选择器

语法

＃ｉｄ名｛属性：属性值｝

只能调用一次，别人切勿使用

４．通配符选择器

＊获取页面所有元素

＊｛属性：属性值｝

二、复合选择器

1.常用的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器

2.后代选择器

元素1 元素2{样式声明}

元素1和元素2空格隔开元素2是元素1的后代修改的是元素2

元素1和元素2可以是任意基础选择器

3.子选择器

元素1>元素2{样式声明}

元素2是元素1的子元素，只选择亲儿子

4.并集选择器

元素1,元素2{样式声明}

元素1和元素2是任何形式的选择器

约定的语法规范：并集选择器喜欢竖着写

5.伪类选择器

伪类选择器最大的特点是用冒号（：）表示

5.1链接伪类选择器

a:link选择所有未被访问的链接

a:visited 选择所有已被访问的链接

a:hover 选择鼠标指针位于其上的链接

a:active 选择活动的链接（鼠标按下未弹起的链接）

为了确保生效，按照上述顺序书写

5.2 ：focus伪类选择器

用于获取焦点的表单元素

input:focus{样式声明}

三、css字体属性

1.font-family:字体系列；可以设置多个字体，每个字体中间用，隔开

2.font-size:字体大小；

px像素是我们网页常用的单位

标题标签比较特殊，需要单独指定文字大小

3.字体粗细：font-weight

normal:相当于400，字体正常显示

bold:相当于700，字体加粗显示

4.文字样式：font-style

normal:标准的字体样式

italic:浏览器显示斜体的字体样式

5.复合样式：font:font-style font-weight font-size/line-height font-family

复合样式不能改变顺序；font-size font-family必须写

四、文本属性

1.文本颜色：color

属性值可以使用英文单词、16进制颜色表示、rgb();

2.对齐文本

text-align：用于设置文本内容的水平对齐方式

3.装饰文本

text-decoration

属性值：none默认没有装饰线 underline下划线 overline上划线 line-through删除线

4.文本缩进

text-indent：用来指定文本的第一行缩进通常用将段落的首行缩进

em:相对单位，就是当前元素的文字大小

5.行间距

line-height：用于设置行间的距离，可以控制文字行与行之间的距离

五、css引入方式

1.内部样式表

2.行内样式表

3.外部样式表

使用<link>标签引入css文件

六、Emmet语法

1.快速生成html标签

1.1生成标签直接输入标签名按tab键

1.2生成多个标签标签名*数目

1.3父子关系 > 例如ul>li

1.4兄弟关系用+就可以例如div+p

1.5生成带有类名或者id 直接写.类名或者#id tab键就可以了

1.6生成的div有顺序可以用自增符号$

1.7生成的标签内容{}

2.快速生成css样式

首字母缩写

3.快速格式化代码

七、元素显示模式

元素以什么方式显示

HTML元素一般分为块元素和行内元素

1.块元素

特点：

自己独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器的100%
是一个容器及盒子里面可以放行内或者块级元素

2.行内元素

特点：

相邻行内元素在一行上一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身的宽度
行内元素只能容纳文本或者其他行内元素

特殊情况<a>里面可以放块级元素但是给<a>转换一下块级模式最安全

3.行内块元素

4.显示模式的转换

转换为块级元素：display：block；

转换为行内元素：display：inline；

转换为行内块元素：display：inline-block；

单行文字垂直居中：让我们文字的行高等于盒子的高度

八、css背景

1.背景颜色

background-color

transparent背景透明

2.背景图片

background-image：none|url(url)

3.背景平铺

background-repeat：repeat|no-repeat|repeat-x|repeat-y;repeat-x横向平铺，repeat-y纵向平铺

默认情况背景图片是平铺的

4.背景图片的位置

background-position：x y;参数代表的意思：x坐标和y坐标。可以使用方位名词

4.1参数是方位名词

如果指定的两个值是方位名词，则两个值前后顺序无关
如果只指定一个方位名词，另一个默认居中的

4.2参数是精确单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标
如果只指定一个值，那该数值一定是x坐标，另一个默认center

4.3参数是混合单位

第一个值为x,第二个为y

5.背景固定

background-attachment：scroll|fixed

scroll：随着滚动而动

fixed：随着滚动不动

6.背景复合写法（实际开发中鼓励）

background

background: black url("images/bg.jpg") no-repeat fixed center top;

7.背景色半透明

background：raba(0,0,0,0.5);最后一个参数是alpha透明度取值范围0~1之间

九、CSS三大特性

1.层叠性

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近就执行哪个样式

样式不冲突，不会层叠

2.继承性

子标签会继承父标签的某些样式

子元素可以继续父元素的样式（text-、font-、line-开头的以及color属性）

行高的继承性：子元素可以继承父元素的行高；行高可以跟单位也可不跟单位，不跟单位是当前元素字体大小的倍数

3.优先级

选择器权重如下表

选择器	选择器权重
继承或者*	0，0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=‘’	1,0,0,0
！important	=无穷大

继承的权重是0；权重会叠加，但是不会有进位

权重叠加：如果是复合选择器，需要权重叠加

十、css盒子模型

1.网页布局过程

先准备好相关的网页元素，网页元素基本都是盒子box
利用CSS设置好盒子样式，然后放到相应的位置
往盒子里面加内容

2.盒子模型的组成

边框（border）、外边距（margin）、内边距（padding）和实际内容（content）

3.边框（border）

3.1边框有三部分组成:边框宽度、边框样式、边框颜色

border：border-width||border-style||border-color

border-width：边框的粗细，一般情况下都用px

border-style：边框样式，solid实线边框，dashed虚线边框，dotted点线边框

border-color：边框颜色

border:1px soild red

border-top(上边框)、border-bottom（下边框）、border-left（左边框）、border-right（右边框）

3.2 表格边框

border-collapse控制相邻单元格的边框

border-collapse:collapse;表示相邻边框合并在一起

3.3边框会影响盒子的大小

解决办法：不测量边框或者width/height-边框

4.内边距（padding）

4.1padding：用于设置内容和边框的距离

padding-top:上内边距

padding-bottom：下内边距

padding-left：左内边距

padding-right：右内边距

4.2内边距复合性写法：

值的个数	表达的意思
padding：5px;	1个值，代表上下左右都有5像素内边距
padding：5px 10px;	2个值，代表上下内边距为5像素，左右边距为10像素
padding：5px 10px 20px;	3个值，代表上内边距为5像素，左右为10像素，下边距为20像素
padding：5px 10px 20px 30px;	4个值，上是5像素，右为10像素，下为20px,左为30px 顺时针方向

padding也会影响盒子的大小；

解决方案：width或者height减去内边距

如果盒子没有指定宽度/高度，则padding不会撑开盒子大小

5.外边距（margin）

5.1.margin：用于设置盒子和盒子之间的距离

margin-top:上外边距

margin-bottom：下外边距

margin-left：左外边距

margin-right：右外边距

margin和padding复合写法代表的意义是一样的

5.2外边距的典型应用

外边距可以让块级盒子水平居中，但必须满足两个条件：

盒子必须指定了宽度
盒子的左右外边距设置为auto

margin：0 auto；

行内元素或者行内块元素水平居中给其父元素添加text-align：center即可

5.3外边距合并

相邻块元素垂直外边距的合并取两个值中的最大一个，解决方案：尽量只给一个盒子添加margin值
嵌套块元素垂直外边距的塌陷：对于2个嵌套的块元素，父元素有上边距给子元素添加上外边距，此时父元素会塌陷较大的外边距值

塌陷的解决方案：

可以为父元素定义上边框
可以为父元素定义上边距
可以为父元素添加overflow：hidden

6.清除内外边距

*{
padding：0；
margin：0；
}

注意：行内元素为了兼顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了

7.去掉li标签的圆点

 li{
            list-style: none;
        }

十一、圆角边框、盒子阴影、文字阴影

1.圆角边框（border-radius）

语法：border-radius：length；参数可以为数值或者百分百的形式

原理：圆与边框的交集形成圆角效果

1.1实现圆效果：

border-radius：50%

1.2圆角矩形设置为高度的一半

2.盒子阴影（box-shadow）

语法：

box-shadow：h-shadow v-shadow burl spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
burl	可选，模糊距离（虚实）
spread	可选，阴影尺寸
color	可选，阴影的颜色，rgba(0,0,0,0.3)半透明
inset	可选，将外部阴影（outset）修改为内部阴影

3.文字阴影（text-shadow）

十二、浮动（float）

网页布局第一准则：多个块元素纵向排列用标准流，多个块内元素横向排列用浮动

网页布局第二准则：先设置盒子大小，再设置盒子位置

1.语法：

选择器{float：属性值}

属性值：none、left、right

2.特性：

2.1浮动的元素会脱离标准流（脱标）

2.2如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

2.3浮动元素会具有行内块元素的特性；任何元素都可以浮动

3.注意点

3.1与标准流的父元素组合使用：纵向排列用标准流，横向排列用浮动

3.2一个元素浮动了理论上其余的兄弟元素也要浮动

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

浮动的元素只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字

4.清除浮动

4.1语法

选择器{clear：属性值；}

属性值：left、right、both

实际开发中只用clear：both

4.2方法

额外标签法

最后一个浮动的盒子加一个空标签调用clear属性；要求新加的标签必须是块级元素

父级添加overflow属性

属性值：hidden、auto、scroll

overflow：hidden；

父级添加after属性

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

.clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

父级添加双伪元素

.clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }