目录
一、简介
CSS层叠样式表,标记语言
设置HTML页面中文本内容(字体大小、对齐)图形等
1.语法规范
选择器以及一条或多条声明
- 选择器是用于指定CSS样式的HTML标签,花括号是对该对象设置的具体样式
- 属性和属性值"键值对"出现
- 属性是对指定对象设置的样式属性,如字体大小、文本颜色等
- 属性和属性值直接用英文":"分开
体验
<!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>Document</title>
<style>
p{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>
2.风格
(1)建议展开式
(2)推荐全部小写
(3)属性值前,冒号后面,保留一个空格
选择器(标签)和大括号中间保留空格
二.基础选择器
选择标签用的
1.选择器分类
基础选择器和复合选择器两大类
基础选择器又分为:标签选择器、类选择器、id选择器、通配符选择器
2.标签选择器
- 标签选择器的作用是为页面中某一类标签指定统一的CSS样式
- 优点是能快速为页面中同类型的标签统一设置样式
- 缺点是不能设计差异化样式,只能选择全部的当前标签
语法
标签名 { 属性1: 属性值1; }
p{
color: red;
font-size: 12px;
}
3.类选择器
3.1基础
如果想要差异化选择不同的标签,单独选一个或者几个标签,可以使用类选择器
.类名 {
属性1: 属性值1;
.....
}
.red {
color: red;
}
需要用class属性来调用class类的意思
<div class='red'> 变红色 </div>
类选择器口诀:样式点定义 结构类(class)调用 一个或多个 开发最常用
注意:长名称组可以用横线来命名.star-sing
不用使用纯数字、中文命名
3.2多类名
我们可以给一个标签指定多个类名,简单理解就是一个标签有多个名字
在标签 class 属性中写多个类名
- 多个类名中间必须用空格分开
- 这个标签就可以分别具有这些类名的样式
<div class="red font35">刘德华</div>
多类名开发中使用场景:
- 可以把一些标签元素相同的样式(公共的部分)放到一个类里面
- 这些标签都可以调用这个公共的类,然后再调用自己独有的类
- 从而节省CSS代码,统一修改也方便
4.id选择器
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
- HTML 元素以 id属性 来设置 id 选择器,CSS中 id 选择器 以 “#” 来定
<style>
#pink {
color: pink;
}
</style>
<div id="pink">迈克尔</div>
id选择器使用口诀
- id 属性只能在每个 HTML 文档中出现一次。
- 记忆口诀:样式 # 定义,结构 id 调用。只能调用一次,别人切勿使用
区别
类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用
id 选择器好比人的身份证号码,全中国是唯一的,不得重复。
id 选择器和类选择器最大的不同在于使用次数上
类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用。
5.通配符选择器
- CSS 中, 通配符使用
*
定义,它表示选取页面中所有元素(标签)。
* {
属性1:属性值1;
....
}
- 通配符选择器不需要调用,自动就给所有的元素使用样式
- 一般是用于清楚元素标签的内外边距
* {
margin: 0;
padding: 0;
}
6.基础选择器总结
三、字体属性
1.font-family
- CSS 使用 font-family 属性设置文本的字体系列
font-family: 'Times New Roman', Times, serif';
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
- 最常见的几个字体:
body { font-family: "Microsoft Yahe",tahoma,arial,"Hiragino Sans GB"; }
2.font-size
- CSS 使用 font-size 属性设置字体大小
- goole浏览器默认字体16px
- px (像素)大小是我们网页的最常用的单位
p{
font-size: 20px;
}
标题标签比较特殊,需要单独指定文字大小
3.字体粗细
- CSS 使用 font-weight 属性设置字体的粗细
4.文字样式
p {
font-style: normal;
}
注意:平时我们很少给文字加斜体,反而要给斜体标签( em , i )改为不倾斜字体
5.复合属性
<style>
/* 想要div 文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
div {
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahe';
/* 复合属性:简写的方式 节约代码*/
/* 顺序:font-style font-weight font-size/line-height font-family */
font: italic 700 16px 'Microsoft yahe';
}
</style>
- 顺序:文字样式 文字粗细 文字大小/行高 文字字体
- 使用font属性时,必须按照上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值),但必须保留
font-size
和font-family
属性,否则 font 属性将不起作用
6.字体总结
四、CSS文本属性
CSS 文本属性可以设置文本的 外观,比如文本颜色、对齐文本、装饰文本、文本缩进、行间距的等
1.color
div {
color: red;
}
2.对齐文本text-align
- text-align 属性用于设置文本内容的水平对齐方式
div { text-align:center; }
3.装饰文本text-decoration
- text-decoration 属性用于装饰文本,可以给文本添加下划线,删除线,上划线等
div { text-decoration: underline; }
取消a默认下划线。重点记住删除下划线就好
a {
text-decoration: none;
}
4.文本缩进text-indent
- text-indent 属性用于指定文本的第一行缩进,通常是将段落的首行缩进
-
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值
-
em是一个相对单位,就是当前元素(font-size)1个文字的大小
-
如果当前元素没有设置大小,则会按照父元素的一个文字大小
div {
text-indent: 10px;
}
p{
text-indent: 2em;
}
如果当前文字16px,1em就是16px,2em就是32px。
5.行间距line-height
p { line-height: 26px; }
行间距包括上间距、文本高度、下间距
6.文本属性总结
五、CSS引入方式
1.内部样式表
写到html页面内部,将所有的CSS代码抽取出来,单独放到一个<style>标签中
<style>
p {
color: red;
font-size: 12px;
font-family: 'Times New Roman', Times, serif';
}
</style>
<style>标签理论上可以放在HTML文档的任何地方,但一般放在文档的<head>中
这种方式可以控制整个页面的元素样式
代码结构清晰,没有实现机构和样式完全分开
2.行内样式表
<div style="color:red;font-size: 12px;">青春不常在</div>
- style其实就是标签的属性
- 在双引号中间,写法要符合CSS规范
- 可以控制当前的标签设置样式
- 不推荐打开使用,只有当前元素添加简单样式,可以考虑
3.外部样式表
适合样式比较多的情况,样式单的写到CSS文件中,之后吧CSS文件引入到HTML
(1)新建.CSS样式表
(2)在HTML页面中,使用<link>标签引入文件
<link rel="stylesheet" herf="css文件路径">
补充:#666666可以简写#666 #ff00ff可以简写#f0f(两两相同可以简写)
给图片标签居中是无效的,需要给其父亲p标签居中
六.Chrome调试工具
1.cmd+opt +控制比
2.Cmd+ +/-放大缩小
3.CSS样式可以改动数值和查看样式
4.cmd+0复原
5.如果点击元素,发现右侧没有样式引入,极有可能样式引入错误
6.如果有样式,但是样式前面有黄色感叹号提示,则是样式属性书写错误