一、css是什么，有什么用？

css的中文全称为层叠样式表
样式表，就是网站的衣服
css其实就是应用到网页上的样式表
表中的每一个样式说明，都可以用来描述网页中的一个或多个元素
网页元素包括文本、图像、列表、表格、视频等
css就是网页元素的描述工具，比如：

(1)我们可以将网页中的某个标题设置为红色：

h1{color:red;}

(2)调整某张图片的大小

img{width:300px;}

二、标签四大通用属性-id,class,title,style

网页上的元素，是通过属性来进行自我介绍
可视元素四大通用属性：id，class，title和style
id相当于身份证号，用来唯一标识网页元素
class相当于标签的类属性，用于元素分类
title相当于元素简介，如元素的用途
style属性用来描述元素的宽度、高度、颜色、轮廓等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<h1 id="caption" class="vip" title="网站名称" style="font-size:36px;color:red;">PHP中文网</h1>
</body>
</html>

网页显示效果：

css选取网页元素大多数情况下，就是靠这几个属性

三、css样式选择符与声明块

样式由选择符和声明块组成；选择符{声明块}；详细的样式声明，以名值对的方式，写在声明块中，并以分号隔开
CSS首先用选择符定位元素，然后在声明块设置元素的大小、颜色、背景、轮廓、透明度等
声明块中的每一条语句都是样式说明，由属性名和对应的值构成
元素通过标签来包装，通过属性来描述；因此，可以通过标签和标签中的属性来选择元素；用标签选择元素最简单，用属性选择元素可以用上一部分学到的id，class，title等

比如对网页中的图片设置圆形红色边框：

简单起见本例的css代码，直接写在html中；以后会单独创建一个css文件
下例中的 img标签选择器，可选择页面中有img标签包装的所有元素
声明块写在一对花括号中，里面的每一个样式声明，就是一个名值对，用分号隔开

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      img{
        border-radius: 50%;/*设置圆形轮廓*/
        border: 2px solid red; /*设置图像边框*/
      }
  </style>
</head>
<body>
  <img src="kenan.jpg" alt="">
</body>
</html>

网页显示效果：

四、CSS样式选择符的种类与特点

选择符通过元素特征来定位，因此元素标签和属性以及位置都可以当作选择符来使用
标签选择符：用标签名称来表示，用来描述网页元素类型的，通常与其他选择符组合使用，返回一组元素

p{text-align:center;} /*段落文本居中*/

ID选择符：用#表示，用来选择网页中用id属性声明的元素，只返回一个元素

#header{background-color:#ccc} /*设置背景为灰色*/

类选择符：用.来表示，用来选择使用了class属性声明的元素，通常返回一组相关的元素

.blue{color:blue;}

属性选择符：除class，id和style以外的属性都可以，属性放在一对[]中，可同时指定多个属性，还可以对属性值进行正则查询

[title="https://www.php.cn"]{font-size:20px;}
/*将具有该属性的元素文本大小设置为20像素*/

群组选择符：可以设置多个元素共用样式，用逗号分隔每个选择符

h1,h2,h3,h4,h5,h6{font-size:lighter}
/*去掉标题元素的加粗样式*/

后代选择符：根据元素之间隶属关系来选择，多个选择符之间，用空格分隔

section h1{color:red;}
/*将section元素下面所有h1元素文本设置为红色*/

子代选择符：只选择当前元素的直接子元素，用>表示，很复杂，里面应用了大量伪类元素。

div>h1{color:green;}
/*将div元素下面子级h1元素文本设置为绿色*/

伪类选择符：伪类主要应用在特定标签上，表示当前元素的状态。例如：a标签的4种状态：未访问，已访问，鼠标悬停，点击中等

a:visited{color:gray}
/*将访问过的链接文本颜色设置为灰色*/

伪元素选择符：主要有first-letter：设置段落首行的首字母样式；first-line：设置段落首行文本的样子。设置段落首字母下沉效果，或首行的显示效果，适合英文。
通用选择符：一次性设置所有标签的统一样式，用*表示，效率低，影响样式继承，不常用

*{font-size:12px}
/*设置网页中文本均为12像素*/

同辈选择符：不常用，通常用更高效的选择符替代

p+a{color:pink}
/*设置p和相邻a标签文本为粉丝*/

五、CSS代码应该写在哪？

写在元素标签的style属性中，仅对当前元素有效
写在当前页面头部的style标签中，仅对当前页面的所有元素有效
写入独立的css文件中，对所有引入该文件的页面都有效

比如：将h1标签的文本变成绿色：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1 style="color:green;">PHP中文网</h1>
</body>
</html>

如果页面中有多个h1标签，且都把文本变成绿色，发现三个标签的标签名相同且都在一个html页面中，可以在当前页面头部的style标签中设置：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      h1{
        color:green;
      }
  </style>
</head>
<body>
  <h1>PHP中文网</h1>
  <h1>PHP中文网</h1>
  <h1>PHP中文网</h1>
</body>
</html>

如果另一个页面，也需要把h1标签中的文本变成绿色，此时可以将样式写入一个独立的css文件中，供所有需要的html文件引用。

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>PHP中文网</h1>
  <h1>PHP中文网</h1>
</body>
</html>

css:

h1{
  color:green;
}

CSS基础 | (一) CSS是什么

一、css是什么，有什么用？

二、标签四大通用属性-id,class,title,style

三、css样式选择符与声明块

四、CSS样式选择符的种类与特点

五、CSS代码应该写在哪？

猜你喜欢