第二周学习css总结（前端）
- 基础选择器
a.标签选择器
b. 类选择器
单独选一个或几个标签
c.id选择器
可以为标有id的html元素指定特定的样式
d.通配符选择器
使用*定义，选取页面中所有的标签
- css字体属性
a.字体系列
css使用font-family属性定义文本的字体系列
<!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>
h1 {
font-family: '宋体';
}
p {
font-family: '微软雅黑';
}
</style>
</head>
<body>
<h1>朱一龙</h1>
<p>朱一龙</p>
</body>
</html>
b.字体大小
css使用font-size属性定义字体大小，字体大小的默认值为16px
其中标题标签比较特殊，需要单独指定文字大小
<!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>
body {
font-family: '宋体';
font-size: 20px;
}
h1 {
font-size: 40px;
}
</style>
</head>
<body>
<h1>抱紧你的我</h1>
<p>比国王富有</p>
<p>曾多么快乐</p>
</body>
</html>
c.字体粗细
css使用font-weight属性设置字体粗细
<!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>
.hey {
font-weight: 700;
}
.red {
color: red;
}
</style>
</head>
<body>
<h1>我曾难自拔于世界之大</h1>
<p>也沉溺于其中梦话</p>
<p class="red">不得真假</p>
<p>不做挣扎</p>
<p class="hey red">不惧笑话</p>
</body>
</html>
d.文字样式
css使用font-style属性设置文本的风格
<!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 {
font-style: italic;
}
em {
font-style: normal;
}
</style>
</head>
<body>
<p>同学</p>
<em>同学</em>
</body>
</html>
e.字体复合属性
<!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 {
font: 40px '宋体'
}
</style>
</head>
<body>
<p>朱一龙</p>
</body>
</html>
- css文本属性
a.文本颜色
color属性用来定义文本的颜色
<!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: green;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>男生</p>
<div>女生</div>
</body>
</html>
b.对齐文本
text-align属性用来设置元素内文本内容的水平对齐方式
<!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>
h1 {
text-align: center;
color: red;
font-family: '宋体';
}
</style>
</head>
<body>
<h1>朱一龙</h1>
</body>
</html>
c.装饰文本
text-decoration属性规定添加到文本的修饰
<!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 {
text-decoration: underline;
color: seagreen;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>朱一龙</p>
<a href="#">朱一龙</a>
</body>
</html>
d.文本缩进
text-indent属性用来指定文本第一行的缩进，通常是将段落的首行渐进。而em是一个相对单位，就是当前元素（font-size）一个文字的大小
<!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>
h1 {
color: orangered;
text-align: center;
}
p {
text-indent: 2em;
color: mediumvioletred;
}
</style>
</head>
<body>
<h1>朱一龙</h1>
<p>2009年，主演数字电影《再生缘》《抢来的新娘》《血色深宅》《血玉咒》。
</p>
<p>2010年，在古装系列数字电影《大明嫔妃》中饰演福王朱常洵 [4] ，主演数字电影《宝藏寻踪》《错嫁》《胭脂劫》《深闺疑云》，出演独立电影《夜郎》，客串情景电视剧《娶进来嫁出去》 [3] 。
</p>
<p>2011年，主演数字电影《绝密使命》《宋朝灰姑娘》《刺妃》《白狐仙》《朵儿的战争》《绅士大盗》《鬼门关》《猎野人》 [7] ，在IMAX 3D电影《大明宫传奇》中饰演君实将军 [5] ，在抗战电视剧《风雨梵净山》中饰演民族英雄孙如柏 [6] 。
</p>
</body>
</html>
e.行间距
line-height属性用来设置行间的距离(行高），可以控制文字行与行之间的距离
<!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 {
font-weight: 700;
line-height: 30px;
}
</style>
</head>
<body>
<p>朱一龙</p>
<p>朱一龙</p>
<p>朱一龙</p>
</body>
</html>
- css的引入方式之三种样式表
a.内部样式表
内部样式表是写到html页面内部的，将所有的css代码抽取出来，单独放到一个<style>标签中
b.行内样式表
行内样式表是在元素标签内部的style属性中设定css样式，适用于修改简单样式
c.外部样式表
外部样式表适用于样式比较多的情况。样式单独写到css文件中，之后把css文件引入到html页面中使用
<link rel="stylesheet" href="css文件路径">
- css复合选择器
a.后代选择器
元素1 元素2 {样式声明}
b.子选择器
元素1>元素2 {样式声明}
c.并集选择器
并集选择器可以选择多组标签，同时为它们定义相同的样式
d.伪类选择器
链接伪类选择器
a：link 未访问过的链接
a：visited 已访问过的链接
a：hover 鼠标放在链接上时
a：active 链接被点击的那一刻
focus伪类选择器
焦点就是光标，一般情况<input>类表单元素才能获取
<!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>
input:focus {
background-color: lawngreen;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
- css的元素显示模式
a.块元素
常见的块元素有<h1>--<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>标签是最典型的块元素
b.行内元素
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>标签是最典型的行内元素
c.行内块元素
行内块元素如<img/>,<input/>,<td>等
- 元素显示模式转换
一个模式的元素需要另一种模式的特性
转换为块元素: display:block;
转换为行内元素:display:inline;
转换为行内块: display:inline-block; - 学习心得
这一周是学习前端的第二周，不得不说前端真的有好多好杂好碎的知识点，很不容易记住完。最近事情比较多，导致我的学习进度有点慢，所以也要更加认真的学习前端，提高自己的效率，去突破那些难学的知识点。加油！！！
1578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
