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; - 学习心得
这一周是学习前端的第二周,不得不说前端真的有好多好杂好碎的知识点,很不容易记住完。最近事情比较多,导致我的学习进度有点慢,所以也要更加认真的学习前端,提高自己的效率,去突破那些难学的知识点。加油!!!