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文件路径">