Web前端学习1
- 一、HTML、CSS
- 二Web前端的三大技术
- 三HTML初始代码
- 四HTML的注释
- 五HTML语义化
- 六标题与段落
- 七文本修饰标签
- 八.图片标签与图片属性
- 九跳转链接与跳转描点
- 十特殊符号
- 十二、嵌套列表
- 十三、表格标签
- 十四、表格属性
- 十五、表单input标签
- 十六、表单相关标签
- 十七、表格表单组合实例
- 十八、div与span
- 十九、CSS语法格式
- 二十、内联样式与内部样式 外部样式及两种写法
- 二十一、CSS颜色表示法
- 二十二、背景样式
- 二十三、背景实现视觉差效果
- 二十四、CSS边框样式 边框实现三角形
- 二十五、family字体类型
- 二十六、字体大小粗细样式
- 二十七、文本修饰与文本大小写
- 二十八、文本缩进与文本对齐
- 二十九、文本的行高
- 三十、文本间距与英文折行
- 三十一、文本与段落实现个人简介
- 三十二、CSS复合样式
- 三十三、ID选选择器及注意事项
- 三十四、CLASS选择器及注意事项
一、HTML、CSS
1.什么是HTML CSS?
是做网站的编程语言
2如何看到网站的原始代码
通过鼠标右击选择查看原始代码
3如何安装插件、语言包
open in browser 打开
view in borwser 运行
4编译器基本使用
二Web前端的三大技术
HTLM
CSS
JAVASCRIPT
一HTLM基础结构与属性
1.HTLM:超文本标记语言
(1)超文本:文本内容+非文本内容(图片、视频、音频等)
(2)标记:单标签 双标签
(3)语言;编程语言
HTML常见标签
http://www.html5star.com/manual/thml5label-meaning
2.标签的属性:来修饰标签设置当前标签的一些功能
三HTML初始代码
1.!+tab键快速创建
2.标签是可以套嵌使用的
3HTML标签含义之元素周期表
4.
<!DOCTYPE-html>
<html-lang="en">
<head>
<meta-charset="UTF-8'>
<title。Document</title>
</head>
<body>
四HTML的注释
1.写法:<!—注释的内容—> 在游览器中看不到,只能在代码中看到
2.意义:
(1)把暂时的不用的代码注释起来,方便以后使用
(2)对研发人员经行提醒
3.ctrl+/添加注释
ctrl+alt+a删除注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<META NAME="viewport" contennt="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--hello world-->
</body>
</html>
五HTML语义化
1.根据网页中内容的结构,选择适合的HTML标签进行编写
2.好处:
(1)在没有CSS的情况下页面也能呈现出很好的内容结构
(2)有利于SEO让搜索引擎爬虫更好的理解网页
(3)方便其他设备解析
(4)便与团队开发和维护
六标题与段落
1.标题–双标题<h1></h1>
2段落–双标签<p></p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<META NAME="viewport" contennt="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
</body>
</html>
七文本修饰标签
1.强调–双标签:<strong></strong>
强调性更强
2.强调+斜体–双标签:<em></em>
3.下标文体:<sub></sub>
4.上标文体:<sup></sup>
5.删除文体:<del></del>
6.插入文体:<ins></ins>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<META NAME="viewport" contennt="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>
<strong>这是一个强调文本</strong>
</p>
<p>
a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
</p>
<p>
促销 :原价<del>300</del>,现价<ins>100</ins>
</p>
</body>
</html>
八.图片标签与图片属性
1.<img>
单标签
2.src引入图片地址
3.alt当图片出现问题的时候出现友好提示
4.title提示信息
5.width height图片大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<META NAME="viewport" contennt="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
< img src=“ ”alt=“ ” title=“ ” width=“ ” height=“ ”>
</body>
</html>
九跳转链接与跳转描点
一跳转链接
1.<a>
标签–双标签<a></a>
2.href属性:链接的地址
3.target属性:可以改变链接打开的方式,默认情况下在当前页面打开
4.base–单标签:作用就是改变链接的默认行为
二跳转描点
1.实现一
“#”+id属性
2.实现二
“#”name属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<META NAME="viewport" contennt="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href=“http://www.baidu.com”>访问百度</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<META NAME="viewport" contennt="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a bref=“ ”>HTML</a>
<a bref=“ ”>CSS</a>
<a bref=“ ”JavaScript</a>
<h2>HTML超文本标记语言</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2>CSS层叠样式表</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2>JS脚本</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
</body>
</html >
十特殊符号
1.&+字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<META NAME="viewport" contennt="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>
<html>
</p>
hello world
</p>
</body>
</html>
十一无序列表、有序列表
1.无序列表:<ul>
符合嵌套规范
2.有序列表:<ol><li>
一般用的比较少可以用无序列表代表
3.<dl>
定义列表
4.<dt>
定义专业术语
5.<dd>
对名词进行解释
.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<META NAME="viewport" contennt="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
</body>
</html>
十二、嵌套列表
列表之间可以互相嵌套形成多层级列。
1.
<ul>
<li>
辽宁省
<ul>
<li>沈阳</li>
<li>大连</li>
<li>丹东</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
<li>烟台</li>
</ul>
</li>
</ul>
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>辽宁省</dt>
<dd>沈阳</dd>
<dd>大连</dd>
<dd>丹东</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>济南</dd>
<dd>青岛</dd>
<dd>烟台</dd>
</dl>
</dd>
<dt>美国</dt>
<dd>洛杉矶</dd>
<dd>纽约</dd>
</dl>
十三、表格标签
<table>
: 表格的最外层容器
<tr>
: 定义表格行
<th>
: 定义表头
<td>
: 定义表格单元
<caption>
: 定义表格标题
注:之间是有嵌套关系的,要符合嵌套规范。
语义化标签
<tHead>、<tBody>、<tFoo>
注:tBody是可以出现多次的,但是tHead、tFood只能出现一次。
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tbody>
<tr>
<td>2019年1月1日</td>
<td><img src="./img/tianqi_1.png" alt=""></td>
<td>天气晴朗,适合出行</td>
</tr>
<tr>
<td>2019年1月2日</td>
<td><img src="./img/tianqi_2.jpg" alt=""></td>
<td>有小雨,出门前请带伞</td>
</tr>
</tbody>
<tFood>
</tFood>
</table>
十四、表格属性
border : 表格边框
cellpadding : 单元格内的空间
cellspacing : 单元格之间的空间
rowspan : 合并行
colspan : 合并列
align :(ieft、center、right) 左右对齐方式
valign :(top、middle、bottom) 上下对齐方式
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<tHead>
<tr align="right" valign="top">
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr valign="top" >
<td rowspan="2">2019年1月1日</td>
<td>白天</td>
<td><img src="./img/tianqi_1.png" alt=""></td>
<td>天气晴朗,适合出行</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./img/tianqi_1.png" alt=""></td>
<td>天气晴朗,适合出行</td>
</tr>
<tr valign="bottom">
<td rowspan="2">2019年1月2日</td>
<td>白天</td>
<td><img src="./img/tianqi_2.jpg" alt=""></td>
<td>有小雨,出门请带伞</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./img/tianqi_2.jpg" alt=""></td>
<td>有小雨,出门请带伞</td>
</tr>
</tBody>
<tFood>
</tFood>
</table>
十五、表单input标签
1.<form>
: 表单的最外层容器
2.<input>
: 标签用于搜集用户信息,根据不同的type属性值,展示不同的控件,如输入框、密码框、复选框等。
input标签有一个type属性,决定什么控件。
<form action="http://www.baidu.com">
<h2>输入框:</h2>
<input type="test" placeholder="请输入用户名">
<h2>密码框:</h2>
<input type="password" placeholder="请输入密码" >
<h2>复选框</h2>
<input type="checkbox" checked>苹果
<input type="checkbox" checked >香蕉
<input type="checkbox" disabled>葡萄<!--disabled 禁止使用-->
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
十六、表单相关标签
<textarea>
: 多行文本框
<select >、<option>
: 下拉菜单
<label>
: 辅助表单
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select size="3">
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select multiple>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<input type="file" muitiple>
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
544.png#pic_center)
十七、表格表单组合实例
<form action="">
<table border="1" cellpadding="30">
<tBody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名:</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码:</td>
<td><input type="password" placeholder="请输入密码"</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
十八、div与span
1.div(块):
div全称为division,"分割、分区"的意思,<div>
标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>
中还可以嵌套多层<div>
,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。
2.span(内联):
用来修饰文字的,div与span都是没有任何默认样式的,需要配合CSS才行。
<div style="border:1px gray solid;">
<h2><a href="#"><span style="color:red">千锋</span>-web大前端培训-好口碑前端培训机构-数万IT人的选择-</a></h2>
<a href="#"><img src="https://feed-image.baidu.com/0/pic/240552903_1988378445_677626377.jpg" alt=""></a>
<p>学费优惠:千锋周年庆,web前端学费优惠高达3000,仅限本周内咨询学员
前端师资:千锋web前端拥有百人教学天团,名副其实前端培训界扛把子
班型/课程:面授班/线上班/好程序员班供学员选择,课程紧贴企业需求</p>
<a href="#">14天免费试学300人讲师团队18个城市开班企业项目实战点击咨询
www.mobiletrain.org</a>
</div>
十九、CSS语法格式
CSS基础语法:
1.格式:
选择器{属性1 : 值1 ;属性2 : 值2 }
2.单位:
px -> 像素(pixel)、% -> 百分比
外容器 -> 600px 当前容器 50% -> 300px
外容器 -> 400px 当前容器 50% -> 200px
3.基本样式:
width、height、background-color(背景色)
CSS注释:
/* CSS注释的内容 */
<style>
div{ width : 100% ; height : 100px ; background-color : red}
span{ background-color: blue;}
</style>
</head>
<body>
<div>这是一个块</div>
<div>又是一个块</div>
<span>这是一个内联</span>
</body>
二十、内联样式与内部样式 外部样式及两种写法
1.内联(行内、行间)样式
在html标签上添加style属性来实现的
2.内部样式
在<style>
标签内添加的样式
注:内部样式的优点,可以复用代码、符合W3C的规范标准,进行让结构和样式分开处理。
<style>
div{width:100px;height:100px;background-color:red}
</style>
</head>
<body>
<!-- <div style="width:100px;height:100px;background-color:red">这是一个块</div>
<div style="width:100px;height:100px;background-color:red">另外一个块</div> -->
<div>这是一个块</div>
<div>另外一个块</div>
</body>
外部样式及两种写法
外部样式
引入一个单独的CSS文件,name.css
<ink>
标签
rel
href
通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性资源的地址。
@import
注:这种方式有很多问题,不建议使用。
link与@import区别
二十一、CSS颜色表示法
1.单词表示法 :red、blue、green、yellow······
2.十六进制表示法:
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
3.rgb三原色表示法: rgb(255,255,255);
取值范围: 0 ~ 255
<style>
/* div{background-color:#ff0000 } */
/* div{background-color:#000000 } */
div{background-color:rgb(0,0,0); }
</style>
</head>
<body>
<div>这是一个块</div>
</body>
</html>
二十二、背景样式
1.background-color : 背景颜色
2.background-image : 背景图片
url(背景地址)
默认: 水平垂直都铺满背景图
3.background-repeat : 背景图片的平铺方式
repeat-x
repeat-y
repeat ( x ,y 都进行平铺,默认值)
4.background-position : 背景图片的位置
x y : number(px、%) | 单词
x: left、center、right
y: top、center、bottom
5.background-attachment : 背景图随滚动条的移动方式
scrol : 默认值 (背景位置是按照当前元素进行偏移)
fixed(背景位置是按照浏览器进行偏移的)
<style>
body{height : 2000px}
div{ width:1440px;height:800px;background-color:red;
background-image:url(./img/tianqi_1.png) ;
background-repeat: no-repeat;
/* background-position: 100px 50px; */
/* background-position: right bottom; */
/* background-position: center center; */
background-position: 50% 50%;
/* background-attachment: scroll; */
background-attachment: fixed;
}
</style>
</head>
<body>
<div></div>
</body>
二十三、背景实现视觉差效果
<style>
#div{width:1400px; height:800px; background-image: url(./img/1.jpg);background-attachment: fixed;}
#div{width:1400px; height:800px; background-image: url(./img/2.jpg);background-attachment: fixed;}
#div{width:1400px; height:800px; background-image: url(./img/3.jpg);background-attachment: fixed;}
table{background-color: white;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"><
二十四、CSS边框样式 边框实现三角形
1.border-style : 边框样式
solid : 实线
dashed: 虚线
dotted : 点线
2.border-width : 边框的大小
px···
3.border-color : 边框的颜色
red #f00 ···
注: 针对某一条进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom
<style>
/* div{ width:300px; height:300px; border-style: solid; border-color:red; border-width: 1px;} */
/* div{ width:300px; height:300px; border-style: dashed; border-color:red; border-width: 30px;} */
/* div{ width:300px; height:300px; border-style: dotted; border-color:red; border-width: 30px;} */
div{ width:300px; height:300px; border-right-style: dotted; border-right-width: 10px; border-right-color: green;
border-top-style: solid; border-top-width: 10px; border-top-color: red;}
</style>
</head>
<body>
<div></div>
</body>
边框实现三角形
颜色 : 透明颜色 transparent==
<style>
body{ background-color: green;}
div{ width:0px; height:0px;
border-top-color:transparent;
border-top-style:solid;
border-top-width: 30px;;
border-right-color:red;
border-right-style:solid;
border-right-width: 30px;;
border-bottom-color:transparent;
border-bottom-style:solid;
border-bottom-width: 30px;;
border-left-color:transparent;
border-left-style:solid;
border-left-width: 30px;;}
</style>
</head>
<body>
<div></div>
</body>
二十五、family字体类型
1.font-family : 字体类型
英文字体 : Arial,‘Times New Roman’
中文字体 : 微软雅黑,宋体
2.中文字体的英文名称 :
微软雅黑: ‘Microsoft YaHei’(非衬线体)
宋体: SimSun(衬线体)
3.衬线体与非衬线体
注意点:
1.多个字体类型的设置目的
2.引号的添加目的
<style>
/* div{ font-family:'Times New Roman';} */
/* div{ font-family:宋体;} */
div{ font-family : Algerian,'New Roman', SimSun , 微软雅黑;}
</style>
</head>
<body>
<div>我好困啊</div>
<p>我好困啊</p>
<div>I'm sleepy</div>
<P>I'm sleepy</P>
</body>
二十六、字体大小粗细样式
front-size : 字体大小
1.默认大小 : 16p
2.写法 : number(px) | 单词 ( small large ··· 不推荐使用)
二十七、文本修饰与文本大小写
1.rext-decoration : 文本装饰
下划线(underline)、删除线(line-through)、上划线(overline)、不添加任何装饰(none)
取值
注: 添加多个文本修饰 : line-through under-line overline
2.text-transform : 文本大小写(针对英文)
小写 : lowercase
大写 : uppercase
只针对首字母大写:capitalize
<style>
/* p{ width: 300px; text-decoration: underline line-through overline;} */
p{ text-transform: capitalize;}
</style>
</head>
<body>
<p>
谷爱凌的父亲是美国人,毕业于哈佛大学,母亲谷燕是北京人,毕业于斯坦福大学,曾是滑雪教练。她从小就时常随母亲回北京度假,加上谷燕特别重视对谷爱凌的中文和中国传统文化教育,因此,从小就流连于北京胡同里的谷爱凌不仅中文流利,绕口令也颇为地道,她也称自己是胡同里长大的北京妞。
</p>
<p>Another building of note is Rosenborg Palace. Rosenborg was used as a royal
residencendoubtedly until the early 1700s but is now used as a museum to house
the Danish Crown Jewels. </p>
</body>
二十八、文本缩进与文本对齐
1.text-indent : 文本缩进
首行缩进
em单位: 相对单位 ,1em永远跟字体大小相同
2.text-align : 文本对齐方式
对齐方式 : left、right、 center、justify (两端点对齐)
<style>
/* p{ text-indent: 2em;font-size: 18px;} */
p{ text-align: justify;}
</style>
</head>
<body>
<p>
庄达菲有着写作、唱歌、跳舞、摄影等兴趣爱好,曾学习大提琴、小提琴、
吉他、钢琴等乐器,还能说一口流利的英语和老北京话 。2018年,她以全国专业排名11的成绩考取北京电影学院表演系本科。庄达菲在幼儿园时,
曾被选角导演选中拍广告,第一次接触拍摄相关的工作。从小学开始,她一直在国际学校上学, 还曾在5年级的时候独自
去往加拿大交流学习,在一个学期的交换学习中,她锻炼了自立能力和自制力。 </p>
</body>
二十九、文本的行高
line-height : 定义行高
取值: 1. number( px ) | scale(比列值,跟文字大小成比列的 )
行高: 一行文字的高度, 上边距和下边距的等价关系。
默认行高: 不是固定值,而是变化的。根据当前字体的大小再不断的变化。
<style>
/* p{ line-height: 40px;} */
p{ line-height: 2;}
</style>
三十、文本间距与英文折行
1.letter-spacing : 定义字间距
2.word-spacing : 定义词间距(针对英文)
3.强制折行: (针对英文)
word-break : break-all;(非常强烈的折行)
word-wrap : break-word; (不是那么强烈的折行,会产生一些空白区域)
<style>
/* p{ letter-spacing: 10px;} */
div{ width: 300px; height: 300px; border: 1px solid red;
word-break: break-all;}
</style>
</head>
<body>
<!-- <div>
谷爱凌(Eileen Gu),2003年出生于美国加利福尼亚州旧金山市,中国自由式滑雪运动员。就读于斯坦福大学。
2019年8月16日,获得2019-20赛季自由式滑雪坡面障碍技巧新西兰公开赛的冠军;8月28日,获得2019年新西兰冬季运动会暨澳洲杯自由式滑雪U型场地赛冠军。2020年1月,获得2020年洛桑冬季青年奥林匹克运动会滑雪U型池、自由式滑雪大跳台冠军,
</div> -->
<div>
Another building of note is Rosenborg Palace. Rosenborg was used as a royal
residencendoubtedly until the early 1700s but is now used as a museum to house
the Danish Crown Jewels.house.
</div>
</body>
三十一、文本与段落实现个人简介
<style>
div{ width:800px;}
h1{ text-align: center; color:#ff6600;}
h2{ color:#00a0ff; text-indent: 2em;}
#p1{ font-style: italic; font-weight:bold ; text-indent: 2em;}
#p2{ color:#66ff00; line-height: 30px; text-indent: 2em;}
#p3{ color: #00ffff; text-decoration: underline; font-style: italic; text-indent: 2em;}
#p4{ font-weight: bold; letter-spacing: 10px; line-height: 30px; text-indent: 2em;}
#p5{ color:#cc00cc; line-height: 30px; text-indent: 2em;}
</style>
</head>
<body>
<div>
<h1>谷爱凌简介</h1>
<h2>基本信息</h2>
<p id="p1">谷爱凌(Eileen Gu),2003年出生于美国加利福尼亚州旧金山市,中国自由式滑雪运动员。就读于斯坦福大学。</p>
<P id="p2">2019年8月16日,获得2019-20赛季自由式滑雪坡面障碍技巧新西兰公开赛的冠军;8月28日,获得2019年新西兰冬季运动会暨澳洲杯自由式滑雪U型场地赛冠军。2020年1月,获得2020年洛桑冬季青年奥林匹克运动会滑雪U型池、自由式滑雪大跳台冠军,</P>
<h2>早年经历</h2>
<p id="p3">2019-2020赛季“最佳时刻”殊荣;11月,荣登“2020福布斯中国30岁以下精英榜”。2021年3月,首次征战世锦赛并在女子U型场地、坡面障碍技巧、大跳台三项比赛中斩获2金1铜;3月22日,自由式滑雪世界杯阿斯本站U型池决赛后因肩伤退赛,结束本赛季争夺。</p>
<h2>个人生活</h2>
<p id="p4">2020年10月19日,谷爱凌接到美国高考SAT的成绩,SAT满分为1600分,谷爱凌取得1580分</p>
<p id="p5">2022年2月8日,谷爱凌夺得2022年北京冬奥会自由式滑雪女子大跳台金牌。2月15日,获得2022年北京冬季奥运会女子自由式滑雪坡面障碍技巧银牌。2月18日,获得北京冬奥会自由式滑雪女子U型场地技巧金牌。
</p>
</div>
三十二、CSS复合样式
一个CSS属性只控制一种样式,叫做单一样式。
一个CSS属性控制多种样式,叫做复合样式。
复合样式:
复合的写法,是通过空格的方式实现的。复合写法有的是不需要关心顺序的,例如: background、border;有的需要关心顺序,例如:font。
1.background : red url() repeat 0 0;
2.border : 1px red solid
3.font :
注 : 最少要有两个值( size、family)
weight style size family √
style weight size family √
weight style size/line-height family √
注: 尽量不要混写,如果非要混写,那么一定要线写复合样式再写单一样式。
<style>
div{ width:300px; height:300px;
background: red url(./img/tianqi_2.jpg)no-repeat center center;
background-color: red;
/* border:2px black solid; */
border-right: 2px blue dashed;
font : bold italic 30px/100px 宋体;
}
</style>
</head>
<body>
<div>这是一段文字</div>
</body>
三十三、ID选选择器及注意事项
1.ID选择器
css : #elem{}
html : id= “elem”
注:
1.在一个页面中,ID值是唯一的。
2.命名规范:字母、下划线、中划线、数字(命名的第一位不能是数字)。
3.命名方式:驼峰式、下划线式、短线式。
驼峰写法: searchButton(小驼峰) SearchButton(大驼峰)
searchsmallRutton
短线写法: search-small-button
下划线写法: search_small_button
<style>
/* div{ background: red;} */
#div1{ background: red;}
#div2{ background: blue;}
</style>
</head>
<body>
<div id="div1">这是一个块</div>
<div id="div2">这又是一个块</div>
</body>
三十四、CLASS选择器及注意事项
CLASS选择器
css : elem{}
html : class = “elem”
注:
1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序
4.标签+类的写法
<style>
.box{ background: red;}
.content{ font-size: 30px; background: blue;}
</style>
</head>
<body>
<div class="box content">这是一个块</div>
</body>