CSS语法

HHYZBC

已于 2022-04-09 16:37:53 修改

阅读量858

点赞数

分类专栏： web 爬虫文章标签： web

于 2022-04-08 14:49:16 首次发布

本文链接：https://blog.csdn.net/HHYZBC/article/details/124013426

版权

web 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

爬虫

15 篇文章 0 订阅

订阅专栏

CSS是什么

全称为Cascading Style Sheets，又叫层叠样式表单，简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、颜色以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。如果不考虑样式的优先级时，一般会遵循“最近优选原则”。

CSS代码命名规范

以下命名规范只是建议，不遵守并不会报错，但是最好养成这样的习惯。方便后续的查找和修改，知道见其名，知其意。

目录结构命名规范

存放CSS样式文件的目录一般命名为style或css。

样式文件的命名规范

在项目初期，把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件，这个文件一般命名为style.css或css.css。

选择符的命名规范

所有选择符必须由小写英文字母或“_”下画线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择符，做到“见其名知其意”

认识CSS

CSS规则集由选择器和声明块组成的

选择器
- 表示指向需要设置样式的HTML元素
声明块
- 包含一条或多条用分号分隔的声明，每一个声明都包含CSS属性名称和一个值，以冒号分隔

多条CSS声明用分号分隔，声明块使用花括号括起来。

上图中使用红色划线的就是选择器，使用黄色圈起来的则是声明块，具体的意思后面会有写，先暂时了解选择器和声明块即可。

CSS的引入方式

一共分为3种，为行内式、内嵌式、外链式。

行内式
- 直接在标签的style属性中添加CSS的样式

<p style="font-size: 20px">这是第一个段落</p>

这种的就叫做行内式

内嵌式
- 又叫做内部样式
- 在<head>标签中加入<style>标签，在<style>标签这编写CSS代码

外链式
- 将css代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中
- <link href="路径" rel="stylesheet" type="text/css">
  - 在href属性中输入路径即可，其他是属性按按上面就行。

三种方式的优缺点

行内式
- 优点：方便、直观
- 缺点：缺乏可重用性
- 一般基本上不用
内嵌式
- 优点：在同一个页面内部便于复用与维护
- 缺点：在多个页面之间的可重用性不强
- 一般在学习CSS样式的阶段中使用
外链式
- 优点：使得CSS样式和HTML页面分离，便于整个页面系统的维护和规划，可重用性比较前
- 缺点：css代码由于分离到单独的CSS文件，容易出现CSS代码过于集中，若是维护不当则容易造成混乱
- 一般在公司开放的阶段中使用，可以对CSS样式和HTML页面分别进行开放

选择器的分类

标签选择器：针对所有某个标签内的所有元素
ID选择器：针对某一个特定的标签使用
类名选择器：针对某个类的标签
通用选择器（通配符）：针对所有的标签都适用
层级选择器：可以对某个容器标签中的其他标签单独针对
组合选择器：针对对多个不同标签中相同的CSS样式

标签选择器

只会影响这个标签的元素，其他标签的元素不会影响，选择器名为标签即可

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        /*标签选择器*/
        p {
            color: #298aff;
        }
    </style>
</head>
<body>
<h1>这是第一个一级标签</h1>
<p>这是第一个段落</p>
</body>
</html>

id选择器

只会影响这个id的元素，其他HTML的元素不会影响，选择器名前加一个#号，表示这个id选择器，在需要影响的标签加相同的id属性即可对它影响

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        /*id选择器*/
        #blue{
            color: blue;
        }
    </style>
</head>
<body>
<h1 id="blue">这是第一个一级标签</h1>
<p>这是第一个段落</p>
</body>
</html>

但是由于元素的id不能相同，所以这种方法不常用。

类名选择器

可以影响标签是这个类内的所有元素，在选择器前面加.号表示这是类名选择器，在需要影响的标签加相同的class属性即可影响，class属性中也可以输入多个不同的类名，使用空格隔开即可

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        /*类名选择器*/
        .blue {
            color: blue;
        }
    </style>
</head>
<body>
<h1 class="blue">这是第一个一级标签</h1>
<p>这是第一个段落</p>
</body>
</html>

可以影响多个标签，比较常用，也可以归为简单选择器

通用选择器

可以影响所有的标签，选择器名为*号表示这个通用选择器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        /*通用选择器*/
        * {
            color: blue;
        }
    </style>
</head>
<body>
<h1>这是第一个一级标签</h1>
<p>这是第一个段落</p>
</body>
</html>

层级选择器

可以对某个容器标签中的其他标签单独针对，选择器名可以是标签、id、类名，对下一层使用空格隔开即可。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        /*组合选择器*/
        div {
            color: blue;
        }
        div p{
            color: #ff0000;
        }
    </style>
</head>
<body>
<div>
    <h1>我是div标签中的h1标签</h1>
    <h2>我是div标签中的h2标签</h2>
    <p>我是div标签中的p标签</p>
</div>
<p>我是div外的p标签，不受div标签的影响</p>
</body>
</html>

上面例子中，div标签可以理解为一个父级标签，内部的其他标签可以理解为子级标签，父级标签影响则子级标签的样式，子级表示也可以单独设置样式，如例子中的：div p就可以理解为div标签中的p标签，对div外面的p标签不会影响

组合选择器

针对对多个不同标签中相同的CSS样式，选择器名可以是选择器名可以是标签、id、类名，中间需要使用,号隔开，表示组合。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        /*组合选择器*/
        p,h1{
            color: #00b6ff;
        }
    </style>
</head>
<body>
<h1>我是h1标签</h1>
<p>我是p标签</p>
</body>
</html>

布局常用样式

边框属性

border
- 线条样式
- border-style
  - 点状线
    - dotted
      - 实例：
      - border-style: dotted;
      - 其他线条定义方法一样，就不演示了
  - 虚线
    - dashed
  - 实线
    - solid
  - 双线
    - double
  - 凹槽
    - groove
  - 垄状边框
    - ridge
  - 3D inset边框
    - inset
  - 3D outset边框
    - outset
  - 无边框
    - none
  - 隐藏边框
    - hidden
  - 混合边框
    - 按照上、右、下、左的顺序指定即可，中间使用空格隔开
    - border-style: solid dotted dashed double
    - 上边框为实线，右边框为点状线，下边框为虚线，左边框为双线
- 边框颜色
- border-color
  - 红色
    - red
    - border-color: red;
    - 其他颜色定义方法一样，就不演示了
  - 黄色
    - yellow
  - 蓝色
    - blue
  - 混合颜色
    - 按照上、右、下、左的顺序指定即可，中间使用空格隔开
    - border-color: red blue yellow green;
    - 上边框为红色，右边框为蓝色，下边框为黄色，左边框为绿色。
  - 这里举的只是少部分颜色，其他颜色定义方法就是它所对应的英文，部分编译器如pycharm；也支持输入RBG、十六进制、色环进行输入颜色，
- 边框粗细
- border-width
  - 一般使用数字即可，支持像素（px）和百分比（%）
    - border-width:2px;(像素)
    - border-width:50%;（百分比）
  - 混合指定粗细
    - 当有一个参数时
      - 表示同时上、右、下、左边框的像素
    - 当有两个参数时
      - 表示前一个参数控制上下像素，后一个像素控制左右像素，中间使用空格隔开
    - 当有三个参数时
      - 表示第一个参数控制上边框像素，第二个参数控制右边框像素，第三个参数控制下、左边框像素，中间使用空格隔开
    - 当有四个参数时
      - 按照上、右、下、左的顺序控制边框像素，中间使用空格隔开
      - border-width:3px 5px 2px 1px
      - 上边框为3像素，右边框为5像素，下边框为2像素，左边框为1像素。
- 边框简写
- border: 像素线条样式颜色;
  - 如：border: 4px double red;
  - 表示边框是4像素的红色双线
- 边框角度
- border-radius
  - 就是设置圆角
  - 直接指定数字即可，单位是像素（px）和百分比（%）
    - 数字一般0px到12px，过大了不会报错，但是会十分的难看
    - border-radius: 12px;
- 边框单独设置
  - 一共分为上边框、右边框、下边框、左边框，分别为：
    - 上边框
      - border-top
    - 右边框
      - border-right
    - 下边框
      - border-bottom
    - 左边框
      - border-left
  - 单独设置颜色：
    - border-方向-color
  - 单独设置线条样式
    - border-方向-style
  - 单独设置线条粗细
    - border-方向-width
  - 同样也可以进行简写
    - border-方向像素线条样式颜色
    - border-left:12px solid blue;
    - 左边框是一条12像素的蓝色实线

外边距属性

margin
- 控制外边距的像素大小，也可以单独对某个方向进行控制，方法和控制边框一样。
- margin: 20px;
  - 表示上、右、下、左的外边距都是20px
- 当参数有两个时
  - 表示第一个参数控制上下边距，第二个参数控制左右边距，中间使用空格隔开。
  - margin: 100px 50px;
- 当参数有三个时
  - 表示第一个参数控制上边距，第二个参数控制左右边距，第三个参数控制下边距，中间使用空格隔开。
  - margin: 50px 150px 200px;
- 当参数有四个时
  - 表示从上、右、下、左的顺序控制边距。
  - margin: 50px 150px 200px 12px;

内边距属性

padding
- 控制外边距的像素大小，也可以单独对某个方向进行控制，方法和控制外边距一样。这里就不演示了

宽度属性

width
- 直接输入数字即可，单位是px（像素）和%（百分比）
  - width: 300px;（像素）
  - width: 50%; （百分比）
- 也可以单独对某个方向的进行控制，方法与边框等一样
  - 左外边距（margin-left）
- 注意：宽度属性只能在块级元素中使用，行级元素中不能使用
  - 块级元素如div标签等，行级标签如span标签等
- 如果在行级标签中设置宽度和高度
  - 在该样式中添加一行定义display属性即可。
  - display:block;表示块级元素显示
  - ```
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        span{
          display: block;/*块级元素显示*/
          background-color: #298aff;  /*背景颜色*/
          height: 300px;
          width: 300px;
        }
        div {
          background-color: #ff2929;
          height: 300px;
          width: 300px;
        }
      </style>
  </head>
  <body>
  <span>这是一个行级标签</span>
  <div>这是一个块级标签</div>
  </body>
  </html>
```

高度属性

height
- 直接输入数字即可，使用方法与宽度相同，就不演示了
- 注意：高度属性只能在块级元素中使用，行级元素中不能使用
  - 块级元素如div标签等，行级标签如span标签等
  - 如何显示方法在宽度中有写，这里就不重复写了

文本属性

字体样式
- font-family
  - font-family:字体名称
  - 如：font-family:宋体
    - 表示设置字体样式为宋体
    - 如果字体名称包含空格，则应用引号括起。
  - 由于大部分计算机中不会安装大量特殊字体，如果设置了这种字体，就有可能发生看到的页面效果和设置的效果发生差异，所以一般使用系统默认的“宋体”“仿宋体”“黑体”“楷体”“Arial”“Verdana”和“TimesNewRoman”等常规字体即可。
字体大小
- font-size
  - font-size:绝对尺寸|相对尺寸
    - 参数单位为常用的有px（像素）、%（百分比）、em（中文字符）
字体粗细
- font-weight
  - 语法：font-weight:bold|number|normal|lighter|100-900
    - |表示或，多选一即可。
    - normal表示默认字体，bold表示粗体，bolder表示粗体再加粗，lighter表示比默认字体还细，100～900共分为9个层次（100，200，…，900），数字越小字体越细、数字越大字体越粗，数字值400相当于关键字normal，700等价于bold。
    - 通常设置“正常”（normal）和“加粗”（bold）两种粗细即可
字体倾斜
- font-style
  - 语法：font-style:normal||italic||oblique
  - |表示或，多选一即可。
  - 参数：normal为“正常”（默认值），italic为“斜体”，oblique为“倾斜体”。
字体颜色
- color
  - color:颜色值;
  - 支持多种方式，在方框颜色中有写，这里就不重复写了
文本的装饰效果
- text-decoration
  - 语法：text-decoration:underline||blink||overline||line-through|none
  - |表示或，多选一即可。
  - 参数：underline为下画线，blink为闪烁，overline为上画线，line-through为贯穿线，none为无装饰。

段落属性

设置文本的对齐方式
- text-align
  - 语法：text-align:left|right|center|justify
  - |表示或，多选一即可。
  - 参数：left为左对齐，right为右对齐，center为居中，justify为两端对齐。
设置段落的首行缩进
- text-indent
  - 语法：text-indent:length
  - 参数：length为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。
  - 单位一般使用em，表示字符。1em等于1给中文字符，两个英文字符等于一个中文租房
设置首字下沉
- first-letter
  - 这个与其他样式不同，是属于伪对象
设置行高
- line-height
  - 语法：line-height:length|normal
  - 参数：length为由百分比数字或由数值、单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。normal为默认行高。
  - 需要注意的是，使用像素值对行高进行设置固然可以，但如果将当前文字字号放大或缩小，原本适合的行间距也会变得过紧或过松。解决的方法是，在line-height属性中使用百分比或数值对行高进行设置。
设置字符间距
- letter-spacing
  - 语法：letter-spacing：length|normal
  - 参数：normal指默认，定义字符间的标准间距；length指由浮点数字和单位标识符组成的长度值，允许为负值。指定负长度值时，这会让字符之间变得更拥挤。
设置文字的截断，要实现溢出文本显示省略号的效果
- text-overflow
  - 语法：text-overflow：clip|ellipsis
  - 参数：clip定义简单的裁切，不显示省略标记（…）。ellipsis定义当文本溢出时显示省略标记（…）。
  - 说明：设置文字的截断。要实现溢出文本显示省略号的效果，除了使用text-overflow属性以外，还必须配合white-space:nowrap（强制文本在一行内显示）和overflow:hidden（溢出内容为隐藏）同时使用才能实现。

图形属性

图像边框
- border
  - 方法与上面边框属性一样，就不重复了，在HTML中也可以直接通过img标签中的border属性进行控制
图像缩放
- 就是通过控制图像的高和宽
  - width（宽度）
  - height（高度）

表格属性

用于设置表格的边框是合并成单边框，还是分别有各自的边框。
- border-collapse
  - 语法：border-collapse:separate|collapse
  - 参数：separate为默认值，边框分开，不合并。collapse为边框合并，即如果两个边框相邻，则共用一个边框。
  - 通常情况下，用户会把表格的border-collapse属性设置为collapse（合并边框），然后设置表格单元格td的border（边框）为1px，即可显示细线表格的样式。
设置相邻单元格边框间的距离。
- border-spacing
  - 语法：border-spacing:length||length
  - 参数：由浮点数字和单位标识符组成的长度值，不可为负值。
  - 说明：该属性用于设置当表格边框独立（border-collapse属性等于separate）时，单元格的边框在横向和纵向上的间距。当只指定一个length值时，这个值将作用于横向和纵向上的间距；当指定了两个length值时，第1个作用于横向间距，第2个作用于纵向间距。
设置表格标题的位置。
- caption-side
  - 语法：caption-side:top|bottom|left|right
  - top：默认值，把表格标题定位在表格之上。
  - bottom：把表格标题定位在表格之下。
  - left：把表格标题定位在表格左侧。
  - right：把表格标题定位在表格右侧。
  - caption-side属性必须和表格的caption标签一起使用。
设置当表格的单元格无内容时，是否显示该单元格的边框。
- empty-cells
  - 语法：empty-cells:hide|show
  - 参数：show为默认值，表示当表格的单元格无内容时显示单元格的边框；hide表示当表格的单元格无内容时隐藏单元格的边框。
  - 说明：只有当表格边框独立时，该属性才起作用。

背景属性

控制背景颜色
- background
  - background-color
    - 语法：background-color:color|transparent
    - 参数：color指定颜色。transparent表示透明的意思，也是浏览器的默认值。
背景图形
- background-image
  - 语法：background-image:url（url）|none
  - 参数：url表示要插入背景图像的路径，none表示不加载图像。
  - 注意：background-image属性优先于background-color属性，也就是说背景图像永远覆盖于背景色之上。
背景图形重复方式
- background-repeat
  - 语法：background-repeat:repeat|no-repeat|repeat-x|repeat-y
  - 参数：repeat表示背景图像在水平和垂直方向平铺，是默认值；repeat-x表示背景图像在水平方向平铺；repeat-y表示背景图像在垂直方向平铺；no-repeat表示背景图像不平铺。
  - 说明：设置对象的背景图像是否平铺及如何平铺，必须先指定对象的背景图像。
背景图形定位
- background-position
  - 当在网页中插入背景图像时，每一次插入的位置都是位于网页的左上角，可以通过background-position属性来改变图像的插入位置。
    - 语法：第一种方法：background-position:length||length
    - 第二种方法background-position:position||position
    - 参数：length为百分比或者由数字和单位标识符组成的长度值。position可取top、center、bottom、left、right之一。利用百分比和长度来设置图像位置时，都要指定两个值，并且这两个值都要用空格隔开。一个代表水平位置，一个代表垂直位置。两个方法使用任意一种即可
    - top：将背景图像同元素的顶部对齐。
    - bottom：将背景图像同元素的底部对齐。
    - left：将背景图像同元素的左边对齐。
    - left：将背景图像同元素的左边对齐。
    - center：将背景图像相对于元素水平居中或垂直居中。

盒子模型

盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，一个盒子的结果包括了厚度、边距（边缘与其他物体的距离）、填充（填充厚度）。引申到CSS中，就是border（边框）、margin（外边距）和padding（内边距）。当然，不能少了content(内容)。也就是说整个盒子在页面中占的位置大小应该是内容的大小加上填充的厚度加上边框的厚度再加上它的边距。盒子模型如图：

默认情况下，盒子的边框是无，背景色是透明，所有在默认情况下是看不到盒子的。

注意:内容属性中有有width(宽度)和height（高度）属性。分别表示内容区域的宽度和高度。增加或减少内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素的总尺寸。

盒模型的总高度为：上外边距（margin-top）+上边框（border-top）+上内边距（padding-top）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom）

盒模型的总宽带为：上外边距（margin-top）+上边框（border-top）+上内边距（padding-top）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom）

有关这4种属性的定义方法在上面常用样式中有写，所有这里就不举例了。

盒子的margin（外边距）叠加问题

由于margin（内边距）和border（边框）属性都只会影响一个盒子内的，所以如果需要精确的控制盒子位置，就只能通过margin（外边距）进行控制。

行家元素之间的margin（外边距）叠加

当两个行级元素紧邻时，它们两个之间的距离等于两个元素的margin之和。

块级元素之间的margin（外边距）叠加

当两个行级元素垂直紧邻时，第一个元素的下外边距会与第二个元素的上外边距发送合并，合并后两个元素的外边距等于这两个元素中外边距较大的值

HHYZBC

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS语法

CSS是什么全称为Cascading Style Sheets，又叫层叠样式表单，简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、颜色以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。如果不考虑样式的优先级时，一般会遵循“最近优选原则”。CSS代码命名规范以下命名规范只是建议，不遵守并不会报错，但是最好
复制链接

扫一扫