文章目录
目标:
1、基础认知
2、基础选择器
3、字体和文本相关样式
4、Chrome调试工具
5、综合案例
一、基础认知
1.1 css介绍
中文名:层叠样式表
作用:给页面中的html标签设置样式
1.2 css语法规则
css写在style标签中,style标签一般写在head标签里面。title标签下面
属性名:属性值;
· css标点符号都是英文状态下的;
· 每一个样式键值对写完之后,最后需要分号隔开。
2.1 css引入方式
<!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>
<!-- 1、内嵌式 -->
<style>
p {
color:red;
}
</style>
<!-- 2、外联式 -->
<link rel="stylesheet" href="./02.css">
</head>
<body>
<!-- 3、行内式 -->
<p style="color:green;">我是一个p标签</p>
<p>我也是一个p标签</p>
</body>
</html>
二、基础选择器
· 标签选择器:标签名{css属性名:属性值;}
· 类选择器:.类名{css属性:属性值;}
· id选择器:#id属性值{css属性名:属性值;}
· 通配符选择器:* {css属性名:属性值;}
1、标签选择器
结构:标签名{css属性名:属性值;}
作用:通过标签名,找到页面中所有这类标签,设置样式
· 标签选择器是一类标签,不是单独一个
· 标签选择器无论嵌套关系有多深,都能找到对应的标签
2、类选择器
结构:.类名{css属性:属性值;}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
· 所有标签上都有class属性,class属性的属性值成为类名
· 类名可卡因由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
· 一个标签可以同时有多个类名,类名之间以空格隔开
· 类名可以重复,一个类选择器可以同时选中多个标签
3、id选择器
结构:#id属性值{css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
· 所有标签上都有id属性
· id属性类似于身份证号码,在一个页面中是唯一的,不可重复的
· 一个标签上只能有一个id属性值
· 一个id选择器只能选中一个标签
类和id的区别:
· 属性值
class可重复,一个标签可以同时有多个class类名
id不可重复,一个标签只能有一个id属性值
· 标签名
类选择器以.开头
id 选择器以#开头
· 实际开发
类选择器用最多
id一般配合js使用,除非特殊情况,否则不用id设置样式
实际开发中会遇到冗余代码的抽取(可将一些公共的代码抽取到一个公共类中去)
4、通配符选择器
结构:* {css属性名:属性值;}
作用:找到页面中所有的标签,设置样式
· 开发中使用极少,只会在特殊情况下才会遇到
· *和{之间有空格
三、字体和文本相关样式
· 字体样式
大小:font-size
粗细:font-weight
样式:font-style
类型:font-family
font属性连写
· 文本样式
· line-height行高
1、字体样式
1.1 字体大小
font-size:数字px
· 谷歌浏览器默认文字大小是16px
· 不设置单位无效
1.2 字体粗细
font-weight
取值:
· 关键字
正常 normal
加粗 bold
· 纯数字:100~900的整百数
正常 400
加粗 700
· 不是所有字体都有九种粗细,因此部分取值页面中无变化
· 实际开发:正常、加粗两种取值使用最多
1.3 字体样式(是否倾斜)
font-style
取值:
正常(默认值):normal
倾斜:italic
1.4 字体系列
font-family:具体字体1,具体字体2,...,字体系列
渲染规则:
· 从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体
· 如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体
如果字体名称中存在多个单词,推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正常显示
1.5 样式的层叠问题
如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效
1.6 字体font相关属性的连写
顺序要求:style weight size family
swsf(稍微舒服)
font:italic 700 30px 楷体,宋体,隶书,sans-serif;
省略要求:
只能省略前两个,如果省略了相当于设置了默认值
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
2、文本样式
2.1 文本缩进
属性名:text-indent
属性值:
· 数字+px
· 数字+em(推荐:1em=当前标签的font-size的大小)
2.2 文本水平对齐方式
属性名:text-align
取值:
left 左对齐
center 居中对齐
right 右对齐
如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置
2.3 文本修饰
属性名:text-decoration
取值:
underline 下划线(常用)
none 无装饰线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
开发中会使用text-decoration:none;清除a标签默认的下划线
2.4 水平居中方法总结
1、text-align水平居中
· 文本
· span标签、a标签
· input标签、img标签
如果需要让以上元素水平居中,text-align:center需要给以上元素的父元素设置
2、margin:0 auto水平居中
· div
· p
· h
(大盒子)
直接给当前元素本身设置即可
margin:0 auto一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认沾满父元素的宽度
2.5 颜色常见取值
3、line-height行高
作用:控制行间距(给一行上下增加间距)
属性名:line-height
取值:
· 数字+px
· 倍数(当前标签font-size的倍数)
应用:
1、让单行文本垂直居中可以设置line-height:文字父元素高度
2、网页精准布局时,会设置line-height:1,可以取消上下间距
如果同时设置了行高和font连写,注意覆盖问题
font:style weight size/line-height family;
如:
font:italic 700 20px/400px 楷体
四、Chrome调试工具
打开方式
选择元素
控制样式
特殊情况
五、综合案例
1、综合案例1-新闻网页
<!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>
.box{
width: 800px;
/* height: 800px; */
/* background-color: pink; */
margin: 0 auto;
}
h1{
text-align: center;
}
.info{
text-align: center;
}
.time{
color: #808080;
}
.sina{
color: #87ceeb;
font-weight: 700;
}
a{
text-decoration: none;
}
p{
text-indent: 2em;
}
</style>
</head>
<body>
<div class="box">
<h1>《自然》评选改变科学的10个计算机代码项目</h1>
<div class="info">
<span class="time">2077年01月28日14:28</span>
<span class="sina">新浪科技</span>
<a href="#">收藏本文</a>
</div>
<hr>
<p>代码就是程序员用开发工具所支持的语言写出来的源文件,是一组由字符、
符号或信号码元以离散形式表示信息的明确的规则体系。 </p>
<p>代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、
便于识别与记忆、力求短小与格式统一以及容易修改等。 源代码是代码的分支,
某种意义上来说,源代码相当于代码。 </p>
<p> 现代程序语言中,源代码可以书籍或磁带形式出现,但最为常用格式是文本文件,
这种典型格式的目的是为了编译出计算机程序。计算机源代码最终目的是将人类可
读文本翻译成为计算机可执行的二进制指令,这种过程叫编译,它由通过编译器完成。 </p>
</div>
</body>
</html>
效果如图:
2、综合案例2-小米官网卡片
<!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{
background-color: #f5f5f5;
}
.box{
width: 234px;
height: 300px;
background-color: #fff;
margin: 0 auto;
text-align: center;
}
.pic{
width: 160px;
}
.info1{
font-size: 14px;
height: 25px;
}
.info2{
font-size: 12px;
height: 30px;
color: #ccc;
}
.info3{
font-size: 14px;
height: 25px;
color: #ffa500;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/car.jpg" alt="" class="pic">
<div class="info1">九号平衡车</div>
<div class="info2">成年人的玩具</div>
<div class="info3">1999元</div>
</div>
</body>
</html>
效果如图: