CSS样式表
Posted 橘猫吃不胖～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS样式表相关的知识，希望对你有一定的参考价值。
CSS样式表
1.1 为什么要使用CSS样式
①html标签的样式比较单一,很难维护
②样式表的切换可以改变网站整体界面风格
③样式表能实现内容与样式的分离，方便团队开发
1.2 CSS样式使用方法
1.2.1 行内嵌入式
行内嵌入式：给标签添加style属性，用来设置样式，而且只对当前嵌入的标签有效。
<p style="color: coral;font-size: 45px;">橘猫吃不胖</p>
1.2.2 页面嵌入式
页面嵌入式：在页面中使用<style></style>定义不同的样式规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式表</title>
</head>
<style>
body {
/*表示body中的所有内容都居中*/
text-align: center;
}
p {
/*p标签的字体颜色设置为橙色*/
color: coral;
/* p标签的字体大小为45像素 */
font-size: 45px;
}
</style>
<body>
<p>橘猫吃不胖</p>
</body>
</html>
1.2.3 导入css文件的方式（推荐使用）
第一步：创建扩展名为.css的样式文件。
第二步：在页面中通过<link>标签将外部的css文件链接起来。一般是在<head></head>中插入<link href=".css文件的地址">
1.3 CSS的选择器
CSS的选择器用来在CSS中定位页面中的标签(控件)。
1.3.1 标签名选择器
格式为：
标签名{
样式规则（属性）：属性值；
}
例如，下面的代码表示p标签中所有的字体为橙色，字号为30像素：
/* p指的是<P>标签 */
p{
/* color和font-size都是属性 */
/* orange和30px代表了属性值 */
color: orange;
font-size: 30px;
}
1.3.2 类选择器
类选择器指的是在页面中给标签添加class属性，标签的class属性值可以重复。
格式：
.类名（标签的class属性值）{
样式规则（属性）:值;
}
例如，在.html文件中给第一个和第三个p标签添加一个class属性jm，第二个p标签不添加class属性：
<p class="jm">橘猫吃不胖</p>
<p>橘猫吃不胖</p>
<p class="jm">橘猫吃的胖</p>
然后在CSS样式中，使用.类名的格式就可以对该标签进行修改样式：
.jm{
color: orangered;
font-size: 35px;
font-family: 宋体;
}
可以看到，标签的class属性可以重复，而且只有第一个和第三个设置了相同的class属性的p标签改变了样式：
1.3.3 id选择器
id选择器是指在页面中给标签添加id属性，但是标签的id属性值不能重复。
格式：
#id名{
样式规则(属性): 属性值;
}
例如，在.html文件中给标签添加一个id属性：
<p id="jm">橘猫吃不胖</p>
在CSS样式中使用id属性为p标签添加样式：
#jm{
color: orchid;
font-size: 50px;
}
1.3.4 通配选择符
通配选择符是指“ * ”，它代表所有元素。
格式：
*{
样式规则(属性): 值;
}
1.4 颜色的表示方式
1.4.1 颜色名直接表示
red、blue、green、pink、orange、white、black
1.4.2 十六进制表示
#rgb或#rrggbb，r、g、b表示三原色的值(取值范围在0~f之间)
1.4.3 rgb函数
rgb(r,g,b)函数：r,g,b三个参数表示三原色的值(取值范围在0~255之间)
rgba(r,g,b,a)函数：r,g,b三个参数表示三原色的值(取值范围在0 ~ 255之间)，参数a表示透明度(取值0.0~1.0之间)
以上是关于CSS样式表的主要内容，如果未能解决你的问题，请参考以下文章
css CSS片段用于覆盖输入文本的chrome自动完成样式
css 来自myStyles.css的[ArasLabs / custom-form-css]片段，显示应用于myIcon的样式