一、CSS概述
- CSS Cascading Style Sheet层叠样式表;
- 可以使网页美观,实现网页结构与表现的分离;
- 以HTML为基础,提供字体、颜色、背景的控制以及整体的排版,可以针对不同的浏览器设置不同的样式。
CSS3中3表示版本号,由于各浏览器厂商对CSS3各属性的支持程度不同,在标准未明确时,通过添加不同厂商的“私有前缀”进行区分。主流浏览器的私有前缀如下:
内核类型 | 相关浏览器 | 私有前缀 |
---|---|---|
Trident | IE8/IE9/IE10 | -ms |
Webkit | Chrome/safari | -webkit |
Gecko | Firefox | -moz |
Blink | Opera | -o |
二、CSS样式规则
-
选择器{属性1:属性值;属性2:属性值;} CSS样式作用的是HTML对象,大括号中是对对象设置的 具体样式。属性与属性值采用的是“键值对”形式。eg: p{font-size:20px; color:red;}
-
CSS样式中选择器区分大小写,属性和值不区分大小写,一般的话,三者都采用小写
-
多个属性之间采用英文分号隔开,最后一个可以保留也可以不保留;
-
若属性值由多个单词组成,则需要添加引号。
三、CSS样式表
1. 行内式引入CSS样式表
在HTML标签内,使用style属性添加。
css写在HTML中,没有实现结构和样式的分离。
<h2 style="font-size:20px;color:red;">对二级标题的字体大小和颜色进行控制</h2>
2.嵌入式引入CSS样式表
在HTML的<head></head>头部中使用<style></style>对选择器进行说明
实现结构与样式的半分离
//未使用css控制时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssStudy</title>
</head>
<body>
<h2>内嵌式引入CSS样式</h2>
<p>使用style标记可定义CSS控制样式</p>
</body>
</html>
//引入之后,在HTML头部对使用的标签进行说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssStudy</title>
<style>
h2{text-align:center;} /*对h2进行控制,让使用它的地方都居中*/
P{color:darkred;text-decoration:underline;} /*控制p标签,使p具有红色下划线的属性*/
</style>
</head>
<body>
<h2>内嵌式引入CSS样式</h2>
<p>使用style标记可定义CSS控制样式</p>
</body>
</html>
3.链入式引入CSS样式
将css样式单独写在HTML外部的.css文件中,在HTML中使用<link>标签进行引入
<link type="text/css" rel="stylesheet" href="存放路径" >
type="text/css"表示为纯文本的css格式,rel="stylesheet"表示与HTML的关系为样式表
/*out.css*/
h2{text-align:center;} /*对h2进行控制,让使用它的地方都居中*/
P{color:darkred;text-decoration:underline;} /*控制p标签,使p具有红色下划线的属性*/
/*HTML*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssStudy</title>
<link type="text/css" rel="stylesheet" href="out.css">
</head>
<body>
<h2>外链式引入CSS样式</h2>
<p>将css样式单独写在HTML外部的.css文件中,在HTML中使用<link>标签进行引入</p>
</body>
</html>
四、CSS基础选择器
1.标记选择器
用HTML标记名称作为选择器,按标记名称分类,
为页面中某一类标记指定统一的CSS样式。
2.类选择器
与标记选择器搭配使用,可以自己定义类选择器,使用class调用,调用多个类选择器时使用空格隔开。
/*.red .green .font为自己定义的类选择器*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssStudy</title>
<style>
h2{font-family:"微软雅黑"}
p{text-decoration:underline;}
.red{color:red;}
.green{color:green;}
.font{font-size:30px}
</style>
</head>
<body>
<h2 class="green">微软雅黑</h2>
<p class="red">第一段落</p>
<p class="green font">第二段落</p>
</body>
</html>
3.id选择器
id选择器的定义方法与类选择器定义类似,不同在于"."变为"#",
使用id进行调用,在同一个页面中一个id选择器只能使用一次,不能使用空格调用多个id.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssStudy</title>
<style>
h2{font-family:"微软雅黑"}
p{text-decoration:underline;}
#red{color:red;} /*.red .green .font为自己定义的类*/
#green{color:green;}
#font{font-size:30px}
</style>
</head>
<body>
<h2 id="green">微软雅黑</h2>
<p id="red">第一段落</p>
<p id="font">第二段落</p>
<p id="red font">第三段落</p> /*第三段落为错误案例*/
</body>
</html>
4.通配符选择器
使用 "*" 表示,对页面中所有标签起作用。不建议使用,会降低运行速度。
5.标签指定式选择器
标签.类名{属性1:属性值1;属性2:属性值2;}
只对特定的标签起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssStudy</title>
<style>
h2.font{font-family:"微软雅黑"}
p.text{text-decoration:underline;color:rebeccapurple}
</style>
</head>
<body>
<h2 class="font">微软雅黑</h2>
<p class="text">第一段落</p>
<div class="font">没有起作用</div>
</body>
</html>
6.后代选择器
只对A标签中B标签进行控制,使用空格表示父子关系
父标签 子标签{属性1:属性值1;属性2:属性值2}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssStudy</title>
<style>
p strong{color:red;}
strong{color:blue;}
</style>
</head>
<body>
<p>p标签中的<strong>strong中的内容为红色</strong></p>
<strong>p标签嵌套之外的strong使用蓝色</strong>
</body>
</html>
7.并集选择器
当多个不同标签使用的css样式相同时,可以使用并集选择器
标签A,标签B,标签C{属性1:属性值1;属性2:属性值2;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssStudy</title>
<style>
h2,h3,p{color:royalblue;font-size:20px;}
h2,.one,.two{text-decoration:underline;}
</style>
</head>
<body>
<h2>咖啡</h2>
<h3>牛奶</h3>
<p class="one">榴莲</p>
<p class="two">香蕉</p>
<div>book</div>
</body>
</html>
五、字体样式属性
-
字体大小 font-size,一般使用的单位是px;
-
字体 font-family,使用多个字体时采用","隔开,中文字体放在英文字体前面,中文需要双引号引住,当有多个英文单词组成时,需要引住
-
字体粗细 font-weight,可以选择具体的数值,也可以使用粗blod、更粗bloder,更细lighter
-
字体风格 font-style,normal默认正常、italic斜体、oblique倾斜
-
综合设置字体 font font:font-style font-weight font-size/line-height font-family ,可以不写全,但是font-size和font-family必须保留。
-
word-wrap有normal:只在允许的段子点换行;break-word
-
@font-face用于定义服务器字体,通过@font-face属性,开发者可以在计算机未安装字体时访问在服务器上的字体。
@font-face{ font-family:字体名称; src:字体路径; } 在其他类选择器中可以通过font-family:字体名称来调用@font-face定义的字体。
现在是2/15/19:46,外面已经全是放烟花的声音,
心已经不在这一块了,想看烟花,今晚有数不尽的烟花
需要一台照相机拍烟花,因为的手机已经拍不出肉眼看到的效果了
希望你爱的人和爱你的人都勇往直前。
最后,祝大家元宵节快乐!!!