CSS样式（1）
时间：2023-09-19 07:24:01 | 来源：网站运营
时间：2023-09-19 07:24:01 来源：网站运营
CSS样式（1）：css注释代码
/*注释代码*/
内联式css样式
把css代码直接写进Html标签内
<p style="color:red;font-size:12px">xxx</p>
嵌入式css样式
把css代码写在<style type="text/css"></style>标签之内，一般嵌入式css样式写在<head></head>之间
<style type="text/css">
span{
color:red;
}
</style>
外部式css样式
把css代码写一个单独的外部文件中，使用<link>标签将css文件链接到Html文件内
<link href="base.css" rel="stylesheet" type="text/css"/>
<link>标签一般写在<head>标签内
rel="stylesheet" type="text/css"是固定写法
选择器
标签选择器p{font-size:12px;line-height:16em;}
类选择器<span class="stress">xxx</span>
.stress{color:red;}
ID选择器<span id="set">xxx</span>
#set{color:red;}
子选择器 用于选择指定标签元素的第一代子元素
.food>li{border:1px solid:red;}
这行代码会使class名为food下的子元素li加入红色实线边框。
包含(后代选择器)：后代选择器是作用于所有子后代元素。
.first span{color:red;}
>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器 使用(*)号指定，作用是匹配Html中所有的标签元素。
分组选择符 为Htl中多个标签元素设置同一个样式，使用分组选择符(,)
h1,span{color:red;}相当于h1{color:red;}
span{color:red;}
伪类选择符 它允许给Html不存在的标签设置样式(标签的某种状态)
比如给Html中一个元素的鼠标滑过状态设置字体颜色：
a:hover{color:red;}
权值
标签使用哪种css样式是浏览器根据权值来判断的，标签等等权值为1 类选择符的权值为10 ID选择符的权值是100
为某些样式设置最高权值
p{color:red!important;}
p{color:green;}
<p class="first">xxx<span>xxx</span>
这里的文字将会显示为红色。
文字排版
---字体
span{font-family:"Microsoft Yahei";}
---字号，颜色
span{font-size:12px;color:#666}
---下划线
span{text-decoration:underline;}
---删除线
span{text-decoration:line_though;}
---粗体
span{font-weight:bold;}
---斜体
span{font-style:italic;}
段落排版
---缩进
span{text-indent:2em;}
---行间距(行高)
span{line-height:i.5em;}
---中文字间距，字母间距
文字间隔或字母间隔用letter-spacing；用在英文单词时，是设置字母之间的间距。
h1{letter-spacing:50px;}
<h1>xxx</h1>
单词与单词之间的间距：word-spacing
h1{word-spacing:50px;}
<h1>welcome to china!</h1>
---对齐
text-align:center;居中
text-align:left;居左
text-align:right;居右
在线咨询
