【小枫r的学习记录002——CSS初识1】
写在最初：
本文为记录前端学习历程而产生，用于回顾复习，知识点比较琐碎，也省略了一些冗长的定义解释型内容。如有错误，多谢指正。
一个小目录
CSS简介
CSS是层叠样式表的简称，有时也称CSS样式表或级联样式表。
CSS是一种标记语言，主要用于设置HTML页面中的文本内容等，起到美化布局的作用。
语法规范：
应用示例：
<style>
p {
color:firebrick;
font: size 23px;
}
</style>
注意：
1.属性和属性值之间冒号分开。
2.选择器是用于指定CSS样式的HTML标签。
3.属性和属性之间用分号分开。
CSS代码风格
- 样式格式书写
- 紧凑格式
- 展开格式 （更直观，更推荐）
- 样式大小写
- 推荐全部使用小写
- 空格规范
- 属性值前面，冒号后面保留空格
- 选择器（标签）和大括号中间保留空格
CSS基础选择器
基础选择器（由单个选择器构成）
-
标签选择器（标签名为选择器）
语法：
标签名 {
属性1： 属性值1；
…
}
作用：可以把某一类标签全部选择出来。
优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式。 -
类选择器（名字）
语法：
.类名 {
属性1 ：属性值1；
…
}
结构需要用class属性调用
应用示例：
<style>
.blue {
color:blue;
}
</style>
<div class="blue">
她是个漂亮的小姑娘
</div>
注意：
1.类选择器使用“.”进行标识，后面紧跟类名（自定义）。
2.长名字可用“-”来连接。
3.尽量使用英文字母命名，不用纯数字和中文。
4.命名要有意义且符合规范。
多类名 给一个标签指定多个名字
多类名使用方式： <div class="red font ">
多个类名之间用空格隔开
注意：
1.可以把一些标签元素相同的样式（共同部分）放到一个类里面。
2.这些标签就可以调用公共的类，再单独调用自己独有的类。
<style>
.blue {
color:blue;
}
.font50 {
font-size:50px;
}
.red {
color:red;
}
</style>
</head>
<body>
<p class="blue font50">
今天天气很好！
</p>
<div class="red font50">
她是个漂亮的小姑娘
</div>
<div class="blue font50">
我今天很忙。
</div>
</body>
-
id选择器（为标有特定id的HTML元素指定特定的样式）（身份证号）
语法
#id名{
属性1：属性值1；
…
}
结构需用id属性调用。
注意：
1.与类选择器的区别是只能调用一次 -
通配符选择器（选取页面中所有的元素）
语法
* {
属性：属性值；
…
}
不需要调用，自动给所有元素使用样式。
复合选择器
尚未学习，将来补充。
CSS字体属性
设置字体
p {font-family：“微软雅黑”；}
注意：
1.各种字体之间必须用英文状态下的逗号隔开
2.一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
3.尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。
字号大小
p{
font-size：20px；
}
注意
1.px（像素）大小是我们网页最常用的单位。
2.谷歌浏览器默认文字大小为16px。
3.不同浏览器可能默认显示的自豪大小不一致，尽量给一个明确值。
4.可以给body指定整个页面文字的大小。
5.标题标签比较特殊，需要单独指定大小。
字体粗细
p{font-weight：bold（数字）}
注意：
1.实际开发中更喜欢数字
文字样式
p{
font-style：italic/normal；
}
注意
1.平时很少给文字加斜体，常常要把斜体给正过来。
文字复合属性
body{
font：font-style font-weight font-size/line font-familly；
}
注意
1.开头是font，之后顺序不能变。
2.属性之间空格隔开。
3.不需要设置的属性值可以省略，但必须保留font-size和font-family属性，否则font属性将不起作用。
div {
font-family:'microsoft yahei';
font-weight:700;
font-style:italic;
font-size:16px;
}
p {
font:italic 700 16px 'microsoft yahei';
}
CSS文本属性
文本颜色
div{
color：red；
}
注意
1.平时开发最常用的是十六进制。
div{
color:pink;
}
div{
color:#ff0000;
}
div{
color:rgb(255,0,0);
}
文本对齐
div{
text-align：center；
}
div{
text-align:center
}
注意
1.只能实现文本水平对齐。
文本装饰
div{
text-decoration：center；
}
div{
text-decoration:underline;
text-decoration:line-through;
text-decoration:overline；
text-decoration:none；
}
文本缩进
首行缩进：
div{
text-indent:20px;
text-indent:2em;
}
注意
1.em为一个相对单位，就是当前元素一个文字的大小，如果当前元素没有设置大小，则会按照父亲=元素的一个文字的大小。
行间距
控制行距
p {
line-height:26px;
}
注意
1.行间距是由文字高度和上下间距组成的。
CSS的引入方式
内部样式表
写到html内部，将所有的CSS代码抽取出来单独放到一个<style>标签中。
<style>
color:red;
font-size:12px;
...
</style>
注意
1.<style>标签理论上可以放在HTML任何地方，一般放在<head>标签中。
2.通过此种方式，可以方便控制当前整个页面中的元素样式设置。
3.代码结构清晰，但是并没有实现结构与样式完全分离。
4.使用内部样式表设定CSS，通常也被称为嵌入式引入，这种方式常用。
行内样式表
在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。
<div style=" color:red;font-size:12px;">
她是个漂亮的小姑娘
</div>
注意
1.style其实就是标签的属性。
2.在双引号中间，写法要合规。
3可以控制当前标签设置样式。
4.由于书写繁琐，且没有出现结构与样式相分离的思想，不推荐大量使用。
5.使用行内样式表设定CSS，通常也被称为行内式引入。
外部样式表
实际开发更多是外部样式表，适用于样式比较多的情况，样式单独写到CSS文件中之后把CSS文件引入到HTML页面中使用。
步骤
1.新建一个后缀名为.css的样式文件，把所有的CSS代码都放到此文件中。
2.在HTML页面中，使用<link>标签引入这个文件。
<link rel="stylesheet" href="工作室2.css">
写在最后
学习了新的知识，才知道自己的渺小与无知。
一以贯之的努力，不得懈怠的人生，所有微小的努力，都会变成最终的结果。
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
