CSS基础知识整理-CSDN博客

本文链接：https://blog.csdn.net/m0_62463568/article/details/124882859

1 什么是CSS？

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2 CSS语法

CSS基础语法
CSS规则由两个主要部分构成：选择器以及一条或多条声明。
每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开。

比如 selector{property：value}

选择器通常是需要改变样式的HTML元素。

比如 h1{color:red; font-size:14px;}  
h1是选择器，color和font-size是属性，red和14px是值。

注意：

如果定义不止一个声明则需要用分号将每个声明分开。例如：p{text-align:center;color:red}
如果值为若干单词，则要给值加引号：例如：p {font-family: "sans serif";}

CSS高级语法
选择器的分组

    h1,h2,h3,h4,h5,h6 {
      color: green;
    }

继承及其问题：根据 CSS，子元素从父元素继承属性。

body {
         font-family: Verdana, sans-serif;
}

3 创建CSS

CSS 创建样式表分为三种情况：
内部样式表

<head>
  <style type="text/CSS">
      选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
      div{width:200px; height:200px; border:1px solid red;}
  </style>
</head>

行内式(内联样式)

<div style="width:200px;height:100px;border:1px solid black;"></div>

外部样式表(外链式)

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

样式优先级：内联样式>内部样式>外部样式
三种样式表区别：

行内样式表：优点书写方便；缺点没有实现样式和结构相分离；使用情况较少；控制范围控制一个标签(少)。

内部样式表：优点部分结构和样式相分离；缺点没有彻底分；使用情况较多；控制范围控制一个页面(中)。

外部样式表：优点完全实现结构和样式相分离；缺点需要引入；使用情况最多，推荐；控制范围控制整个站点(多)。

4 id和class选择器

ID选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。

HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。注意： id 属性不能以数字开头。

语法：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

class选择器：
class 选择器用于描述一组元素的样式，也叫做类选择器。

class 可以在多个元素中使用，并且一个元素也可以指定多个类名。

在 CSS 中，类选择器以一个点 "." 号来定义。

同样的类名的第一个字符也不能使用数字。

语法：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

ID 选择器和类（class）选择器的区别：
相同点：

都可以应用于任何元素

不同点：

ID 选择器只能在文档中使用一次，而类选择器可以使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名)，而ID只能指定一个。

5 CSS元素选择器

最常见的CSS选择器就是元素选择器，也就是标签选择器，也就是在HTML中元素的最基本的选择器。

语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

6 CSS背景(background)

background 属性用于定义 HTML 元素的背景。
定义元素背景效果的 CSS 属性有五种：

background-color          背景颜色
background-image          背景图像
background-repeat         背景图像设置水平或垂直平铺或不平铺
background-position       背景图像设置定位
background-attachment     背景图像设置固定或滚动

背景属性简写：
body{
    background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}
当使用简写属性时，属性值的顺序依次为：
background-color --> background-image --> background-repeat --> 
background-attachment --> background-position

7 CSS外观属性

CSS文本格式主要分为：文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。

文本对齐方式：text-align属性有四个值：left，center，right，justify(两端对齐)；属性默认值为auto。
文本修饰：text-decoration 属性用来设置或删除文本的修饰。

主要是用来删除超链接的下划线，也可以使用其他值来设置文本的修饰；

text-decoration:overline，设置文本上划线。

text-decoration:line-through; 设置文本中间划线。

text-decoration:underline; 设置文本下划线。
文本阴影：text-shadow: x y shadow color；

其中 x 是水平阴影的偏移值，

y 是垂直阴影的偏移值，

shadow 用于指定阴影的模糊值，即模糊效果的作用距离，不允许负值。

color 指定阴影的颜色。该属性有两个作用，产生阴影和模糊主体。
文本缩进：用来指定文本的首行缩进，允许为负值，如果值是负数，第一行则向左缩进。

CSS表示为：text-indent:2em，em 是相对文字大小的单位，1em 就是1个文字大小，2em 就是两个文字大小。
文本间距：行高，也就是文本行的高度。例如：line-height：22px;
字间距：letter-spacing 和 word-spacing 这两个属性都可用来增加或减少文本间的空白，即字间距。

不同的是：
letter-spacing 属性设置字符间距，而 word-spacing 属性设置单词间距。
注意：word-spacing 属性对中文无效，因此在设置中文的字间距时请使用 letter-spacing 属性。
letter-spacing 和 text-align：justify 是两个冲突的属性，不能同时使用；

text-align:justify 是设置内容根据宽度自动调整字间距，使各行的长度恰好相等，实现文本两端对齐效果，

而 letter-spacing 是指定一个固定的字间距。
文本空白处理：white-space 属性指定元素内的空白如何处理，默认值为 normal 空白会被浏览器忽略。
该属性还有4个值：

nowrap 文本不会换行，禁止换行，文本会在同一行上继续，直到遇到 <br> 标签为止。
pre 空白会被浏览器保留，这种方式类似 HTML 中的 <pre> 标签，用于定义预格式文本。
pre-wrap 指定保留空白符序列，但是正常地进行换行。
pre-line 指定合并空白符序列，但是保留换行符，并允许自动换行。
文本转换：text-transform 属性控制文本中的字母。

是用来指定在一个文本中的大写和小写字母，可用于将所有字句变成大写或小写字母，或每个单词的首字母大写。
text-transform:capitalize，定义文本中的每个单词以大写字母开头。
text-transform:uppercase，定义文本仅有大写字母。
text-transform:lowercase，定义文本仅有小写字母。

8 CSS字体 (font)

font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性。

简写顺序：
font-style(字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体)
注意，font-size 和 font-family 的值是必需的，否则无效。

(1)是绝对或相对大小，可以使用px、em、%和em组合来设置。

使用px设置：通过像素设置文本大小是设置的整个页面。
使用em设置：1em等于当前的字体尺寸，比如设置的默认字体是12px，因此1em的默认大小就是12px。像素转换em：px/12 = em
使用%和em组合设置：在所有浏览器的解决方案中，设置 <body> 元素的默认字体大小是 100%，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

<head>
    <style>
        body{font-size:100%}
        p{font-size:2.5em; }   /* 2.5*16=40px */
    </style>
</head>
<body>
    <p>使用%和em组合设置</p>
</body>

(2)font-style 属性主要用于指定斜体文字。
属性有三个值：