HTML学习笔记（3）——CSS的引入，选择器和文本样式

最新推荐文章于 2022-07-28 22:56:51 发布

EaVanCN

最新推荐文章于 2022-07-28 22:56:51 发布

阅读量422

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/u011200062/article/details/47347687

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS的基本语法由选择器和声明组成，声明由一个属性和一个值组成，属性和值用冒号隔开，不同的声明用分号隔开。

一、引入CSS常用的有三种方法：

1、外部样式

在头部中加入<link rel=”stylesheet” href=”文件位置” type=”text/css”/>，外部文件是一个.CSS的文件。

2、内页样式

在头部中直接写入<style type=”text/css”> </style>

3、行内样式

在段内加入style，eg：<p style=”font-size:40px”> </p>

二、选择器

1、简单选择器

①id选择器

通过给标签加上id属性，而给该id属性一个值，通过

#id {

}来选择。

id值命名规则：a.只使用字符，连字符。区分大小写。

b.以字母开头避免用数字开头。

c.一个id只能在一个页面出现一次，避免不同标签id相同。

②类选择器

方法：给标签加上class属性并给该属性一个值（类名）

. 类名{

}

③标签选择器

直接将HTML标签名作为选择器

div{

}

2、复杂选择器

1>交集选择器

一个标签选择器后边跟一个类选择器或id选择器，中间不能有空格，它要求必须是属于某一个标签的，并且声明了类选择器或id选择器。

2>并集选择器

选择器用逗号相连，满足其中之一就会被选择。

3>后代选择器

以空格相连，外层的选择器写在内层选择器前面，根据元素的后代关系来最为选择条件。

4>伪类选择器

a:hover{

} 是鼠标放在上面的一种状态，常用在链接a上面。

5>通配符选择器

} 选择所有内容。

<!doctype html>
<html lang="zh-CN">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>学习CSS</title>
  <style type="text/css">
p{
text-indent:5px;
line-height:15px;
word-spacing:18px;
letter-spacing:10px;
text-decoration:underline;
font-family:微软雅黑；}
p{
text-align:center;}
p{
font-size:20px}
</style>
 </head>
 <body>
  <p>hello word我是一个段落</p>
  <p>我是一个段落</p>
 </body>
</html>

三、文本样式

text-indent:5px; 缩进

line-height:15px; 行高

word-spacing:18px; 单词间距

letter-spacing:10px; 字间距（包括汉字和每个字母）

text-decoration:underline; 下划线，可以用来去除链接的下划线

font-family:微软雅黑；字体

text-align:center; 对齐方式

font-size:20px 字的大小

font-weight:bold,或使用数字来控制字加粗