css基础（1）
文章目录
css常写在
<head></head>之中
选择器（如h1){
样式
}
给谁改样式{
改什么样式
}
例：p{
color: red;
font-size:12px;/修改文字为十二像素/
}
css选择器
根据不同的需求把不同的标签选择出来，即选择标签。
标签选择器
基础选择器
基础选择器是由单个选择器构成的
标签选择器
标签名作为选择器
把某一类标签全部改掉
<style>
p{
color:green;
}
</style>
类选择器
单独选一个或几个标签
.类名{
属性：属性值；
}
结构需要用class属性来调用
<style>
.red{
width: 100px;
height: 100px;
color: red;
}
</style>
<body>
<ul>
<li class="red">变红</li>
<li class="red">变白</li>
</ul>
<div class="red">变黑</div>
</body>
谁想使用就加上class=‘类名’
类名是自定义的，但不能是标签名；
长的类名可以中间加上短横线来分割；
不要使用纯数字，中文等命名。
多类名
<style>
.red{
color: red;
}
.font35{
font-size: 35px;
}
</style>
<body>
<div class="red font35">变黑</div>
</body>
在标签class属性中写多个类名；
多个类名中间必须有空格；
这个标签就可以分别具有只些类名的样式。
id选择器
井号+id名
<style>
#red{
color: red;
}
</style>
<body>
<div id="red">变红</div>
</body>
id选择器只能在html文件中出现一次
通配符选择器
使用“*”定义，它表示选取页面中所有元素（标签）。
*{
属性：属性值；
}
<style>
*{
color: red;
}
</style>
所有标签的颜色都会变成红色
通配符选择器不需要调用，自动就给出所有元素的使用样式。
CSS字体属性
font-family属性
p（标签）{
font-family:'Microsoft YaHei',Arial;
}
两个词拼写而成的用引号（单引号双引号都可以）包含，单个词不用
并列好几个字体，会有优先级，如果都没找到相应字体，会使用默认字体。
font-size属性
<style>
body（任意标签）{
font-size: 35px;
}
</style>
注：标题标签比较特殊，需单独定义
font-weight属性
<style>
.bold{
font-weight: 700;（细的加粗）
}
h2{
font-weight: 400;（粗的变细）
}
</style>
<body>
<h2>属性</h2>
<p class="bold">变红</p>
</body>
实际开发中，更喜欢使用数字改变粗细。
font-style属性
p{
font-style: normal;
}
font复合属性写法
div{
/*font: font-style font-weight font-size/line-height font-family;*/
font: italic 700 16px/20px "Microsofe yahei";
}
必须按照font: font-style font-weight font-size/line-height font-family;的顺序写，不可以颠倒顺序。
不需要设置的属性可以省略（取默认值），但是必须保留font-size和font-family属性，否则font属性将不起作用。
CSS文本属性
文本颜色color
color: 颜色值（red）
或六位十六进制数（#ff0000）（常用）
或RGB代码（rgb(255,0,0)或rgb(100%,0%,0%)）
对齐文本text-align
div{
text-align: center/left(默认）/right;
}
装饰文本text-decoration
div{
text-decoration: underline;
}
去掉链接默认的下划线：
a{
text-decoration:none;
}
<a href=" ">去掉下划线</a>
文本缩进text-indent
用来指定文本第一行缩进多少距离。
p{
text-indent: 20px;
text-indent: 2em;
//缩进当前文字2个大小的距离
}
像素值为负就会往左边缩进。
em为相对单位，就是当前元素（font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
行间距line-height
用于设置行间的距离，可以控制文字行一行之间的距离。
p{
line-height: 16px;
}
注：FSC屏幕标尺可以测量行间距
CSS引入方式
内部样式表
把html文件中所有CSS代码放在<style>中，<style>理论上可以放在任何位置，一般放在<head>中。
行内样式表
在元素标签内部style属性中设定CSS样式，适合修改简单样式。
<div style="color:red; font-size: 12px;">行内样式表</div>
外部样式表
样式单独写到CSSS文件中，然后把CSS文件引入到HTML页面中使用。
使用步骤：
新建一个后缀名为.css的样式文件，把所有CSS代码都放在此文件中。
（CSS文件里只有样式，没有标签）
在HTML页面中，使用<link>标签引入这个文件。
<link rel="stylesheet" href="css文件路径">
行内样式表
在元素标签内部style属性中设定CSS样式，适合修改简单样式。
<div style="color:red; font-size: 12px;">行内样式表</div>
外部样式表
样式单独写到CSSS文件中，然后把CSS文件引入到HTML页面中使用。
使用步骤：
新建一个后缀名为.css的样式文件，把所有CSS代码都放在此文件中。
（CSS文件里只有样式，没有标签）
在HTML页面中，使用<link>标签引入这个文件。
<link rel="stylesheet" href="css文件路径">
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
