CSS 网页的美容师

最新推荐文章于 2025-09-17 17:47:49 发布

原创最新推荐文章于 2025-09-17 17:47:49 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文详细介绍CSS的基本概念，包括层叠样式表的作用、字体样式设置、选择器应用以及伪类选择器的使用，帮助初学者快速掌握CSS核心技能。

CSS初识

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS样式规则

选择器{属性:值; 属性:值;}

在上面的样式规则中:

选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“:”连接。
多个“键值对”之间用英文“;”进行区分。可以用段落和表格的对齐的演示。

CSS字体样式属性

font-size: 字号大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，像素单位px比较常用

h2 {
   	font-size: 30px;
｝

font-family: 字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:“微软雅黑”;}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

常用技巧

现在网页中普遍使用14px+。
尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

h2 {
	font-size: 30px;
	font-family:  "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB";
}

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。

方案一：你可以使用英文来替代。比如 font-family:“Microsoft Yahei”。

方案二：在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。
font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。

font-weight: 字体粗细
字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

小技巧
数字 400 等价于 normal，而 700 等价于 bold。但是我们更喜欢用数字来表示。

font-style: 字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
- normal：默认值，浏览器会显示标准的字体样式。
- italic：浏览器会显示斜体的字体样式。
- oblique：浏览器会显示倾斜的字体样式。
font:综合设置字体样式
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

标签选择器（元素选择器）

指定统一的CSS样式。其基本语法格式如下：

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

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

    <style>
    /*将所有p标签里内容的颜色设置为绿色*/
	     p{
	         color: green;
	     }
    </style>

    <p>小鸡炖蘑菇</p>
    <p>托儿所</p>
    <p>鱼尾纹</p>
    <span>儿童劫</span>

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名” 即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

	/*将类名为p的内容的颜色设置为粉红色*/
        .p{
            color: pink;
        }

    <div class="p">提款姬</div>

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

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

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

id选择器和类选择器区别
- W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
- 类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜
- id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。
  id选择器和类选择器最大的不同在于使用次数上。
通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

注意：

这个通配符选择器，就像我们的电影明星中的梦中情人，想想它就好了，但是它不会和你过日子。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

为了和我们刚才学的类选择器相区别，类选择器是一个点比如 .demo {} 而我们的伪类用 2个点就是冒号比如 :link{}

链接伪类选择器
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。 love hate 爱上了讨厌记忆法或者 lv 包包非常 hao

a {   /* a是标签选择器  所有的链接 */
	font-weight: 700;
	font-size: 16px;
	color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
	color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

结构(位置)伪类选择器（CSS3)
:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型

:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式

  div :first-child{ 			 /*选择第一个孩子*/
      color: red;
  }

  div :last-child{			/*选择最后一个孩子*/
      color: orange;
  }

  div :nth-child(2){			/*选择第二个孩子，n 代表第几个的意思*/
      color: green;
      font-size: 40px;
  }

  div :nth-last-child(3){			/*从最后一个开始数第三个孩子*/
      color: blue;
  }

目标伪类选择器(CSS3)

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

<style>
    :target {
        color: green;
    }
</style>

 <!--这里点击下面的a标签就会使上面p标签里的内容变成绿色-->
<p id="green">有人说，史上99%的事情是可以用金钱摆平的，但是他们没说的是，剩下的1%就是意味着要更多的钱。</p>
<p><a href="#green">变绿</a></p>

CSS外观属性

color：文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种：

1.预定义的颜色值，如red，green，blue等。

2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

line-height：行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7.8像素左右就可以了。

text-aline：水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）
right：右对齐
center：居中对齐

text-indent：首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

letter-spacing：字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing：单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

颜色半透明(CSS3)

文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：

    color: rgba(r,g,b,a)  a 是alpha  透明的意思  取值范围 0~1之间  
    color: rgba(0,0,0,0.3)

文字阴影(CSS3)

以后我们可以给我们的文字添加阴影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

效果：

text-shadow: 3px 4px 5px rgba(0,0,0,.5);

<div>
	<p>钞票不是万能的，有时还需要信用卡。</p>
</div>

在这里插入图片描述