CSS 网页的美容师
代码书写方法:结构(html)和样式(CSS)相分离
CSS作用和目的:设置HTML的版面布局和外观显示样式。
1. 行内式(内联样式)
(1)语法格式:
**<标签名 style = "属性1:属性值1; 属性2:属性值2:……"> 内容 </标签名>**
<!--color:改变颜色;font:改变字体的格式-->
<div style="color:red ; font-size: 18px;" > 我在这里等你 </div>
样式直接写在标签内部
缺点:没有实现结构和样式分离
2. 内部样式表(内嵌样式表)
(1)概念:
是将CSS代码写在HTML文档的head头部标签中,并用style标签定义
(2)语法格式:
<head>
<style type = "text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
</head>
<head>
<title></title>
<style type="text/css">
h1{
color: red;
font-size:22px;
}
p{
color:blue;
}
</style>
</head>
attation:
(1)style标签一般位于head标签中,当然理论上它可以放在html的任何地方
(2)type =“text/css” 在html5中可以省略
(3)只能控制当前页面
3. 外部样式表(外链式)
(1)概念
将所有的样式放在一个或多个以 CSS 为扩展名的外部样式表文件中
通过 link标签 将外部样式表链接到HTML文档中
link 标签 是一个单标签; link标签要放在 head头部标签中,且指定link标签的三个属性
<!--这句话就是给html和css文件 建立一种联系-->
<head>
<link rel="stylesheet" type="text/css" href="css文件路径"
</head>
属性 | 作用 |
---|---|
rel | 定义当前文档与被链接文档之间的关系,在这里指定为“stylesheet”,表示被链接文档是一个样式表文件 |
type | 所连接文档的类型,表示链接的外部文档是CSS样式表。可省略不写 |
href | 定义所链接外部文档的URL,可以是相对路径,也可以是绝对路径 |
使用外部样式表的优点:结构和样式分离;而且可以通过link标签,实现文件共享。
4 总结
CSS格式:
h1 { color: red; font-size:25px; }
选择器 {属性:属性值;属性:属性值;}
(1):选择器用于指定CSS样式的HTML标签,花括号是对该对象设置的具体样式
(2):属性和属性值是以“键值对”的形式出现
(3):属性是对指定的对象设置的样式属性,例如 字体大小、文本颜色等等
(4):属性和属性值之间用 : 连接
(5):多个键值对 之间用 ; 进行区分
CSS选择器(重点)
CSS选择器的作用:选出我们想要的的标签。
选择器的分类:
基础选择器 :包括(1)标签选择器、(2)类选择器、(3)id选择器、(4)通配符选择器
复合选择器
(1)标签选择器
作用:标签选择器可以将 某一类的标签全部选择出来,比如所有的div标签 和所有的span 标签。
标签选择器口诀:
标签选择器,
页面同选起。
直接写标签,
全部不放弃
标签选择器的特点:可以选中页面中所有的标签,全部选择时比较方便;
不能差异化选择不同的标签,如果想选择单独一个或者某几个,最好使用你类选择器
(2)类选择器
代码格式:
类名选择器
<!--head中定义-->
.类名{
属性1:属性值1;
属性2:属性值2;
}
类名
<p class = '类名'> </p>
类选择器的特点:可以选择一个或多个标签;类名是自定义的,尽量使用英文名来定义类名。
记忆口诀:
差异化选择
一个或多个
上面 点 定义
类名别写错
谁用谁调用
class来做
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>谷歌</title>
<style >
.font100{
font-size: 100px;
}
.blue{
color: blue;
}
.red{
color: red;
}
.yellow{
color: yellow;
}
.green{
color: green;
}
</style>
</head>
<body>
<!--多类名 font100-->
<span class="blue font100">G</span>
<span class="red font100">o</span>
<span class="yellow font100">o</span>
<span class="blue font100">g</span>
<span class="green font100">l</span>
<span class="red font100">e</span>
</body>
</html>
(3)id 标签选择器
代码:
<head>
<title>title</title>
<style >
#pink {
color:green;
}
</style>
</head>
<body>
<p id="pink">愿你出走半生</p>
<p>归来仍是少年</p>
</body>
id选择器 和类选择器 的使用方法很相似
两者之间的区别是:
类选择器(class)像人的名字,可以多次使用,适用于修改样式中;
id选择器(id)像人的身份证,只能用一次,一般用于页面唯一性的元素上,和javascript搭配使用。
(4)通配符选择器
通配符选择器用 * 来表示 , * 就是表示所有的标签,它是所有选择器中使用范围最广的。
代码格式:
* {属性1:属性值1;属性2:属性值2;}
总结
选择器 | 作用 | 缺点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如 p | 不能差异化选择 | 使用情况较多 | p {color:red;} |
类选择器 | 可以选出一个或者多个标签 | 根据需求选择 | 非常多 | .nav{ color : red; } ,选择的标签用class调用 |
id选择器 | 一次只能选择一个标签 | 只能使用一次 | 不推荐使用 | # nav { color : red ;} 选择的标签用 id调用 |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分会不需要 | 不推荐使用 | *{ color : red ;} |
最常见的就是 类选择器 了。
在书写格式的时候,尽量选择比较有意义的名字,可以从表面上看出来意思的。
CSS字体样式
font字体
(1)font-size 大小
代码:
<p font-size : 20px;>
(2)font-family 字体
网页中常见的字体有:黑体、微软雅黑、宋体。
中文字体需要加引号,单引号、双引号都可以,英文可加引号 可不加。
可以同时指定多个字体,中间用逗号(英文状态下的逗号),如果浏览器不支持第一个字体,则会尝试下一个,如果都没有,则会使用电脑默认的字体。
font-family: "Arial","宋体","黑体";
CSS Unicode字体
(3)font-weight 字体粗细
在html中可以使用标签来将字体加粗,使用 b 和 strong 标签
用css中的font-weight也可以,属性值有:normal / bold /100~900(400是normal;700是bold)
font-weight: 400;
(4)font-style 字体风格
字体倾斜:
用html中的标签 i 或者em;
用css中的font-style,属性值有normal(正常) / italic(斜体)
/*让斜体变正常*/
font-style: normal;
/*字体变成斜体*/
font-style: italic;
(5)font :综合设置字体样式
选择器 {
font : font-style font-weight font-size/font-height font-family; }
attation:
使用font属性时,必须按照上面语法格式中的顺序书写,不能更改顺序,各个属性以 空格 隔开;
其中不需要设置的属性可以省略(取默认值),但是必须保留font-size 和font-family,否则font属性不起作用。
font总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 单位是px |
font-family | 字体 | 默认是 微软雅黑 |
font-weight | 字体粗细 | 400 = normal ; 700是bold,没有单位 |
font-style | 字体样式 | italic是斜体 normal是不倾斜 |
font | 字体连写 | 1.字体连写是有顺序的;2.字体连写必须出现字体和字号 |
CSS外观属性
(1)color :文本颜色
属性值 | 属性值 |
---|---|
预定义的颜色值 | red 、green、blue |
十六进制 | #FF0000、#FF6600、#29D794 |
REG代码 | rgb(255,0,0) |
(2)line-height 行间距
作用:line-height属性用于设置行间距,就是行与行之间的距离
单位:有三种单位 像素px、相对值em和百分比%,使用最多的是px.
line-height: 26px;
(3)text-align:文本水平对齐
text-align属性用于设置 文本内容的水平对齐,相当于html的align的对齐属性。
属性 | 解释 |
---|---|
left | 左对齐(默认值) |
right | 右对齐 |
center | 居中对齐 |
(4)text-indent:首行缩进
单位:em;1em就是一个汉字的宽度
p{
line-height: 26px;
text-indent: 2em;
}
(5)text-decoration:文本的装饰
text-decoration:常用于给连接修改装饰效果的。
属性 | 意思 |
---|---|
none | 默认。可以用来取消下划线 (最常用) |
underline | 下划线(常用) |
line-through | 贯穿线(不常用) |
overline | 上划线(不用) |
a{
text-decoration: none;
}
总结:
属性 | 表示 | 注意点 |
---|---|---|
color | 颜色 | 十六进制 |
line-height | 行高 | 控制行与行之间的距离 |
text-align | 水平对齐 | 设定文字水平的对齐方式 |
text-indent | 首行缩进 | text-indent:2em ; |
text-decoration | 文本装饰 | 下划线:underline ; 取消下划线 :none |