CSS（一）

DeDeDeFeng

已于 2022-11-27 12:53:38 修改

阅读量329

点赞数

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

于 2022-11-07 20:36:33 首次发布

原文链接：https://blog.csdn.net/qq_53123067/category_11904914.html?spm=1001.2014.3001.5482

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS简介

什么是CSS：

CSS(Cascading Style Sheets的缩写)，翻译为“层叠样式表”或者“级联样式表”，简称样式表。

CSS的主要作用：

主要用来给HTML网页设置外观或者样式(HTML网页中的文字大小、颜色、字体、网页的背景颜色、背景图片等)。

CSS的语法规则：

CSS代码由选择器和一对括号组成；大括号里面是由一条条的声明语句组成；每一条语句都要使用英文状态下面的分号；每一条语句是由“属性:值”组成；CSS中的属性值一般不加引号；在CSS中如果属性值为数值型数据的时候，一般情况下需要加单位，单位一般都是px(像素)；在CSS中不能出现HTML标签。

CSS代码的书写方式：

1.嵌入式：是通过HTML中的<style>标签将CSS代码嵌入到HTML中，语法规则如下：

<style type="text/css"> 
  /*书写CSS代码,如果使用的是HTML5文档，type属性可以省略*/
  选择器{属性:值;属性:值}
</style>

2.外链式：是指单独写一个以.css为扩展名的文件，然后在<head></head>标签中使用<link/>标签，将这个css文件链接到html文件中，语法规则如下：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=], initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

引入外部样式表步骤：

1.新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中

2.在HTML页面中使用<link>标签引入这个文件

<link rel="stylesheet" href="css文件路径">

如果确保引入文件成功，以谷歌浏览器举例：

刷新网页出现.css文件可以说明我们引入文件成功，我们也可以引入多个CSS文件，只需要写link标签就可以了。

行内式：是指将CSS代码书写在HTML标签的style属性(style是一个通用属性，每一个标签里面都拥有这个属性)中，其语法格式如下：

<标签名 style="属性:值;属性:值"></标签名>
例如
<div style="width: 100px; height:100px; background-color:red"></div>

总结：

使用嵌入式的方式来书写CSS代码，它只能作用于当前的HTML文件。

使用外链式的方式来书写CSS代码，它可以作用于多个HTML文件。

Emmet语法

快速生成html标签

1.生成标签直接输入标签名按Tab键就可以，如div然后按tab键，可以直接生成<div></div>

2.生成多个相同标签，如div*3

3.生成父子级关系，如ul>li

4.生成兄弟关系，如div+p

5.生成带有类名或者id名字的，直接写 .demo 或者 #two 然后tab键

6.生成div类名是有顺序的，可以用自增符号$

快速生成css样式

1.比如w200 按tab 直接生成 width：200px;

2.比如 ih26 按tab 直接生成 line-height：26px；

选择器

什么是选择器:

选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式

选择器的分类:

1.基本选择器

2.复合选择器

3.伪类选择器

4.属性选择器

基本选择器

选择器	格式	含义	举例
标签选择器	标签名 {属性：值；}	匹配对应的HTML标签	p {font-size：15px；}
类选择器	.class属性值 {属性：值；}	给拥有指定class属性值的元素设置样式	.box {width：400px；}
id选择器	#id属性值 {属性：值；}	只能使用一次	#title {color：red；}
通用选择器	* {属性：值；}	通用选择器，将匹配HTML所有标签（IE6不支持，给大型网站增加负担）	* {background-color：green；}

复合选择器

1.后代选择器

2.子元素选择器

3.并集选择器（多元素选择器）

4.伪类选择器

选择器	含义	举例
并集选择器（多元素选择器）：选择器1，选择器2， {属性：值；}	多元素选择器，同时匹配选择器1和选择器2，多个选择器之间用逗号分隔	p,h1,h2 {margin:0px;}
后代元素选择器： E F {属性：值；}	后代元素选择器，匹配所有属于E元素后代的F元素 E和F之间用空格分隔	#slidebar p {font-color:#000;}
子元素选择器： E>F{属性：值；}	子元素选择器，匹配所有E元素的子元素F	div> p{color:#008000;}
相邻元素选择器: E+F {属性:值;}	相邻元素选择器，匹配所有紧随E元素之后的同级元素F	div + div{color:#008c8c}

伪类选择器

伪类选择器是用来给超级链接的不同状态来设置样式。

超级链接的四种不同状态：正常状态、访问过后状态、鼠标放上状态、激活状态。

1.链接伪类 2.结构伪类等

下方为链接常用伪类选择器

选择器	含义
:link	向未被访问的链接添加样式
:visited	向已被访问的链接添加样式
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:active	鼠标放在元素上面时，点击的一瞬间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{/* 正常状态 */
            color: #f00;/* 红 */
        }
        a:visited{/* 访问过后状态 */
            color: #000;/* 黑 */
        }
        a:hover{/* 鼠标悬停状态 */
            color: gold;/* 黄 */
        }
        a:active{/* 激活状态 */
            color: #0f0;/* 绿 */
        }
 
    </style>
</head>
<body>
    <a href="http://www.bilibili.com">哔哩哔哩</a>
    <a href="http://www.douyu.com">斗鱼</a>
    <a href="http://www.123.com">123</a>
</body>
</html>

默认正常状态下，我们设置为红色如下

总结：

超级链接的不同状态它其实是有顺序的，也就是说伪类选择器设置其实是有顺序的。如果不按照伪类选择器的顺序，那么样式就会失效。

顺序：要遵循 “爱恨法则” 要先有爱，才有恨。“Love Hate”。

超级链接的美化：

我们通常会去掉超级链接的下划线，然后同时会给超级链接设置一个颜色。一般情况下：

正常状态与访问过后的状态的样式设置为一样；当鼠标放上的时候给其设置为另外一个颜色，激活状态一般不会设置，因为激活状态的时间太短。举例：

/*正常状态与访问过后的状态*/
a:link,a:visited{
    text-decoration: none; color: #444;
}
/*鼠标放上状态*/
a:hover{
    color: #f00;
    text-decoration:underline;
}

下方为：focus伪类选择器

:focuss伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况下<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

input:focus {
  background-color:yellow;
}

例如：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>:focus伪类选择器</title>
  <style>
    /* 把获得光标的input表单元素选取出来 */
   input:focus {
    /* 选框设置为红色 */
    background-color: red;
    /* 选框内的文字设置为绿色 */
    color: green;
   }
  </style>
</head>

<body>
  <!-- 三个表单 -->
  <input type="text">
  <input type="text">
  <input type="text">
</body>

效果为：

CSS字体属性

1.字体系列

CSS使用font-family属性定义文本的字体系列

p {font-family:"微软雅黑"；} 
div {font-family：Arial,"Microsoft Yahei","微软雅黑"；}

2.字体大小

CSS使用font-size属性定义文本的字体大小

p {
    font-size:20px;
}

·px（像素）

·谷歌浏览器默认的文字大小为16ox

·不同浏览器默认显示的字号大小不一致，我们尽量给一个明确值，不要默认大小

3.字体粗细

CSS使用font-weight属性定义文本的字体粗细

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	400等同于normal，700等同于bold，（数字后面不跟单位）

4.文字样式

CSS使用font-style属性定义文本的风格

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style：normal;
italic	浏览器会显示斜体的字体样式

属性值

作用

normal

默认值，浏览器会显示标准的字体样式

font-style：normal;

italic

浏览器会显示斜体的字体样式

注意：平时我们很少给文字加斜体，反而要给斜体的标签（em，i）改为不倾斜的字体

5.文字复合属性写法

body {

font:font-style 风格是否斜体

font-weight 粗细

font-size/line-height 大小/行高

font-family 字体名称

;

}

注意：不能更换顺序，各个属性之间用空格隔开，必须保留font-size和font-family属性

6.字体属性总结

属性	表示	注意点
font-size	字号	常用单位是px，一定要跟上单位
font-family	字体名	实际工作中按照约定来写
font-weight	字体粗细	加粗是700或者bold，不加粗是400或normal，数字不要跟单位
font-style	字体样式	倾斜是italic，不倾斜是normal
font	字体连写	1.不能更换顺序 2.各个属性之间用空格隔开 3.必须保留font-size和font-family属性

CSS的文本属性

1.文本颜色

color属性用于定义文本的颜色

div {

color:red;

}

表示	属性值
预定义的颜色值	red，green，blue，pink等
十六进制	#FF000,#FF6600,#29D794
RGB代码	rgb（225，0，0）或rgb（100%，0%，0%）

2.对齐文本

text-align属性用于设置元素内文本内容的水平对其方式

属性值	解释
left	左对齐（默认）
right	右对齐
center	居中对齐

3.装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

属性值	描述
none	默认没有装饰线
underline	下划线，链接a自带下划线
overline	上划线
line-through	删除线

4.文本缩进

text-indent属性用来指文本的首行缩进

div {

text-indent:10px;

}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值

p {

text-indent:2em;

}

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

5.行间距

line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离

p {

line-height:26px;

}

6.文本属性总结

属性	表示	注意点
color	文本颜色	通常使用十六进制，比如简易形式#fff
text-align	文本对齐	设定文字水平的对齐方式
text-indent	文本缩进	通常用于段落的首行缩进2个字的距离（2em）
text-decoration	文本修饰	下划线underline 取消下划线none
line-height	行高	控制行与行之间的距离

CSS的元素显示模式

1.块元素

常见的块元素有<h1>~<h6> <p> <div> <ul> <ol> <li>等，其中<div>标签是最典型的块元素

块元素特点：

1.比较霸道，自己独占一行

2.高度，宽度，外边距以及内边距都可以控制

3.宽度默认是容器（父级宽度）的100%

4.是一个容器及盒子，里面可以放行内或者块级元素

注意：文字类的元素内不能放块级元素

2.行内元素

常见的行内元素有<a> <strong> <b> <em> <i>等，其中<span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素

行内元素特点：

1.相邻行内元素在一行上，一行可以显示多个

2.高宽直接设置是无效的

3.默认宽度就是它本身的宽度

4.行内元素只能容纳文本或者其他行内元素

注意：链接里面不能再放链接特殊情况下，<a>里面可以放块级元素，但是给<a>转化一下块级元素更安全

3.行内块元素

在行内元素中有几个特殊的标签：<img/><input/><td>它们同时具有块元素和行内块元素的特点。称他们为行内块元素

特点：

1.和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）

2.默认宽度就是它本身内同的宽度（行内元素特点）

3.高度，行高，外边距以及内边距都可以控制（块级元素特点）

总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽高	容器的100%	容器级可以包含任何标签
行内元素	不可以直接设置宽度	不可以直接设置宽高	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	可以直接宽度和高度	可以设置宽高	它本身内容的宽度

元素显示模式的转换

特殊的情况下，我们需要元素模式的转换，简单礼节：一个模式的元素需要另一种模式的特性

如：想要增加链接<a>的触发范围

转换为块元素:display:block;

转换为行内元素：display:inline;

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

例如：

 <style>
    a {
      width: 150px;
      height: 50px;
      background-color: pink;
      /* 把行内元素a转换为块级元素 */
      display: block;
    }
    div {
      width: 150px;
      height: 50px;
      background-color: purple;
      /* 把块元素div转换为行内元素 */
      display: inline;
    }
    span {
      width: 100px;
      height: 80px;
      background-color: skyblue;
      /* 把行内元素span转换为行内块元素 */
      display: inline-block;
    }
  </style>
</head>

<body>
  <a href="#">金星阿姨</a>
  <a href="#">金星阿姨</a>
  <div>我是块级元素</div>
  <div>我是块级元素</div>
  <span>行内元素转换为行内块元素</span>
  <span>行内元素转换为行内块元素</span>
</body>

一个小工具的使用 snipaste

简单而强大的截图工具，也可以将截图贴回屏幕上

常用快捷键：

1.F1截图，测量大小，设置箭头，书写文字

2.F3在桌面置顶显示

3.点击图片，alt取色

4.esc关闭

案例：小米侧边栏

 <title>简单版小米侧边栏</title>
  <style>
    /* 1.把链接a转换为块级元素 */
    a {
      display: block;
      width: 230px;
      height: 40px;
      background-color: #55585a;
      font-size: 14px;
      color: #fff;
      text-decoration: none;
      text-indent: 2em;
      padding-top: 15px;
    }
    /* 2.鼠标经过链接变换背景颜色 */
    a:hover {
      background-color: #ff6700;
    }
  </style>
</head>

<body>
  <a href="#">手机 电话卡</a>
  <a href="#">电视 盒子</a>
  <a href="#">笔记本 平板</a>
  <a href="#">出行 穿戴</a>
  <a href="#">智能 路由器</a>
  <a href="#">健康 儿童</a>
  <a href="#">耳机 音响</a>
</body>

效果为

单行文字垂直居中的代码

CSS没有提供文字垂直居中的代码，这里可以使用一个小技巧来实现

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

line-height:盒子的高度；

CSS的背景

背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。

1.背景颜色

background-color:颜色值；

2.背景图片

background-image

语法格式：

background-image:none/url(url)

 <style>
    div {
      width: 300px;
      height: 300px;
      /* 不要落下url（）背景图片地址 */
      background-image: url(images/logo.png);
    }
  </style>
</head>

<body>
  <div></div>
</body>

参数值	作用
none	无背景图（默认）
url	使用绝对护着相对地址指定背景图像

（1）背景平铺

在html页面上对背景图像进行平铺，可以使用background-repsat属性

background-repsat：repeat（平铺）；

no-repeat（不平铺）；

repeat-x（沿x轴平铺）；

repeat-y（沿y轴平铺）；

<style>
    div {
      width: 300px;
      height: 300px;
      background-image: url(images/logo.png);
      /*背景图片不平铺 */
      background-repeat: no-repeat;
      /*背景图片平铺 */
      background-repeat: no-repeat;
      /*背景图片沿着X轴平铺 */
      background-repeat: repeat-x;
      /*背景图片沿着Y轴平铺 */
      background-repeat: repeat-y;
    }
  </style>
</head>

<body>
  <div></div>
</body>

注意：页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景图片会压住背景颜色

（2）背景图片位置

利用background-position属性改变图片在背景中的位置

background-position：x y；

代表：X坐标和Y坐标，可以使用方位名词或者精确单位

参数值说明
length 百分数/由浮点数字和单位标识符组成的长度值
position 方位名词：top（上）、center（中）、bottom（下）、left（左）、center（中）、right（右）

参数值	说明
length	百分数/由浮点数字和单位标识符组成的长度值
position	方位名词：top（上）、center（中）、bottom（下）、left（左）、center（中）、right（右）

<1>当参数是方位名词：

两个值前后顺序无关，比如background-position：left top；和background-position：top left；效果一致。

只指定了一个方位名词，另一个值省略，则第二个默认居中对齐。

<2>当参数是精确单位：

如果参数值是精确坐标，第一个一定是X坐标，第二个一定是Y坐标。

如果只指定一个数值，那么该数值一定是X坐标，另一个Y坐标默认垂直居中。

<3>当参数是混合单位：

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是X坐标，第二个值是Y坐标。

（3）背景图像固定/背景附着

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

使用场景：后期可以制作视差滚动的效果

参数	作用
scroll	背景图像是随着对象内容滚动
fixed	背景图像固定

（4）背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并写在一个background中

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

背景颜色

背景图片地址

背景平铺

背景图像滚动

背景图片位置

<style>
    div {
      background:black url(images/bg.jpg) no-repeat fixed center top;
    }
  </style>

（5）背景色半透明

background：rgba（0，0，0，0.3）；

注意：

·最后一个参数是alpha透明度，取值范围在0~1之间

·习惯把最后一个0.3写成 .3

·背景半透明是指盒子背景半透明，盒子里面的内容不受影响

3.背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值十六进制 RGB代码
background-image	背景图片	url（图片路径）
background-repeat	是否平铺	repat no-repat repat -x repat-y
background-position	背景位置	length position
background-attachment	背景附着	scroll(背景滚动) fixed（背景固定）
背景简写	书写更方便	背景颜色背景图片地址背景平铺背景图像滚动背景图片位置
背景色半透明	背景颜色半透明	background：rgba（0，0，0，0.3）；后面必须是4个值