前端学习第二周
目录
- 二十一.表格
- 21.1表格标签
- 1. ``
``:表格的最外层容器
- 2. ``
``:定义表格行 - 3. ``
``:定义表头 - 4. ``
``:定义表格单元 - 5. ``
``:定义表格标题 - 21.2表格属性
- 二十二.表单
- 22.1表单标签
- 22.1.1````标签的常用属性
- 22.1.2多行文本框
- 22.1.3菜单
- 22.1.4辅助表格的功能
- 22.2表格和表单的综合使用
- 二十三.````和````
- 23.1``(块)``标签
- 23.2``span(内联)``标签
- 23.3实例
- 一.CSS基础语法
- 1.1格式
- 1.2基本样式
- 1.3长度单位
- 1.4CSS注释
- 二.内联样式与内部样式
- 2.1内联(行内、行间)样式
- 2.2内部样式
- 2.3内部样式与内联样式的区别
- 三.外部样式及两种写法
- 3.1````标签
- 3.1.1rel属性
- 3.1.2``
``属性
- 四.CSS颜色表示法
- 4.1单词表示法
- 4.2十六进制表示法
- 4.3rgb三原色表示法
- 4.4获取网页当中的颜色
- 五.CSS背景样式
- 5.1背景颜色
- 5.2背景图片
- 5.3背景图片的平铺方式
- 5.4背景图片的位置
- 5.5背景图随滚动条的移动方式
- 5.6背景图片的大小
- 六.背景实现视觉差效果
- 6.1原理(区分相同标签的方法)
- 6.2练习
- 七.CSS边框样式
- 7.1边框的大小
- 7.2边框的颜色
- 7.3边框的样式
- 7.4代码案例
- 八.边框实现三角形
- 8.1原理
- 8.2练习
- 九.CSS文字样式
- 9.1字体类型
- 9.2衬线体与非衬线体
- 9.3注意事项
- 9.3.1设置多字体的方式
- 9.3.2引号的问题
- 9.4字体大小粗细样式
- 9.4.1字体大小
- 9.4.2字体粗细
- 9.4.3字体样式
- 9.4.4字体颜色
- 十.CSS段落样式
- 10.1文本修饰与文本大小写
- 10.1.1文本修饰
- 10.1.2:文本大小写(只针对英文)
- 10.2文本缩进与文本对齐
- 10.2.1文本缩进
- 10.2.2文本对齐方式
- 10.3文本的行高
- 10.3.1定义行高
- 10.4文本间距和英文折行
- 10.4.1定义字间距
- 10.4.2强制折行(只针对英文)
- 10.5文本与段落实现个人简介
- 10.5.1练习
- 10.6CSS复合样式
- 10.6.1定义
- 10.6.2复合的写法
- 十一.CSS选择器
- 11.1ID选择器及注意事项
- 11.1.1id选择器
- 11.1.2注意事项
- 11.2CLASS选择器及注意事项
- 11.2.1class选择器
- 11.2.2注意事项
二十一.表格
通过代码的编写可以在浏览器上实现表格
21.1表格标签
都是双标签,有嵌套关系,要严格符合嵌套规范。
1.
:表格的最外层容器
2.
:定义表格行 3.
:定义表头 4.
:定义表格单元 5.
:定义表格标题例:
<table><tr><caption>原神角色caption><th>胡桃th><th>行秋th><th>草神th>tr><tr><td>火td><td>水td><td>草td>tr>table>显示为
原神角色 胡桃 行秋 草神 火 水 草 语义化标签
<tHead>:表示头部,即<th>部分。 用法:<thead><tr><caption>原神角色caption><th>胡桃th><th>行秋th><th>草神th>tr>thead> <tBody>:表示身体,即<td>部分。 用法: <tbody><tr><td>3.2或更后面td><td>无所谓td><td>3.2上半td>tr>tbody> <tFood>:表示尾部,用法同上。无实际意义,相当于一种标准,优化浏览器此这程序的运行,尽量使用。
注:在一个table中tbody可以出现多次,但thead、tfood只能出现一次。
21.2表格属性
- 用于
的属性
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
例:- 用于
的属性
rowspan:合并行
例:额 - 用于
的属性
colspan:合并列
例:胡桃 - 用于
的属性
align:左右对齐方式
valign:上下对齐方式
align:left(左)、center(中)、right(右)
valign:top(上)、middle(中)、bottom(下)
例
二十二.表单
就是一些输入框,文本框等
22.1表单标签
下面是一些常见的表单标签
1.<form>表单的最外层容器 2.<input>(单标签)用于搜集用户信息,根据不同的type属性值,展示不同的控件,如输入框、密码框、复选框等。 3.<textarea>多行文本框 4.<select>、<option>下拉菜单 5.<label>辅助表单表格标签的通用属性:checked、disabled、name、for…
22.1.1
标签的常用属性
- text属性:文本输入框
placeholder属性是一个提示语,
显示为
<h2>账号h2><input type="text">显示出一个账号框
- password属性:密码输入框
<h2>密码h2><input type="password">显示出一个密码框
- checkbox属性:复选框(checked)
checked属性会让后面的元素默认被选中,disabled属性会让后面的元素无法被选中。
<input type="checkbox" checked>a<input type="checkbox" disabled>b<input type="checkbox">c会出来三个选项,可进行选择
- radio属性:单选框
name属性让他们成为一组,让浏览器识别,从而可以单选。
<input type="radio" name="1">men <input type="radio" name="1">women进行单选
- file属性:上传文件
<h2>h2> <input type="file">-
submit属性:提交(把用户输入的信息提交给form的action属性中的网址,以便后续操作)
-
reset属性:重置(重置输入信息)
<form action="https://www.baidu.com/"> <h2>h2><input type="submit"><input type="reset">form>- multiple属性:多选
<input type="file" multiple>可以进行文件的多选
//去掉input点击后边框颜色
input { outline:none; }
//改变input触发后边框颜色
input{ outline-color:red; }
22.1.2多行文本框
标签
作用:在网页上显示一个多行文本框,可以进行文字的输入。<h2>多行文本框h2> <textarea cols="30" rows="10">textarea>cols属性表示列数,rows属性表示行数
22.1.3菜单
标签
作用:在网页上显示一个菜单,可以进行选择。<form> <h2>下拉菜单h2> <select size="3"><option selected disabled>aoption><option>boption><option>coption><option>doption> select> <select multiple><option>1option><option>2option><option>3option><option>4option> select> form>是外层标签,是内层标签。- selected属性:这个项被选中
- disabled属性:这个项无法被选中
- size属性:显示多个项
- multiple属性:可以选中多个项
22.1.4辅助表格的功能
标签
作用:辅助表格的功能<input type="radio" name="1" id="2"><label for="2">manlabel> <input type="radio" name="1" id="3"><label for="3">womenlabel>- for属性
与id属性对应,使label标签中的文字也能作为选项使用,从而提升用户的体验 - id属性
与for属性对应
22.2表格和表单的综合使用
因为表格要符合嵌套规范,所以把表格放外层,而表单不需要嵌套规范,所以用在里面。
二十三.
和23.1
(块)标签div全称为division,“分割、分区”的意思, div标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即html中的大多数标签都可以嵌套在div标签中,div中还可以嵌套多层div,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。
23.2
span(内联)标签用来修饰文字的,div和span都是没有任何默认样式的,需要配合css才行。
23.3实例
<div><h2><a href="ys.mihoyo.com/" target="blank">《原神》官方网站-全新3.1版本「赤土之王与三朝圣者」上线!a>h2><p><span>《原神》<span>3.1版本「赤土之王与三朝圣者」现已推出!《原神》是由米哈游自研的一款开放世界冒险RPG。你将在游戏中探索一个被称作「提瓦特」的幻想世界。在这广阔的世界中,你可以踏遍七国,邂逅性格各...p><a href="ys.mihoyo.com/" target="_blank">1a>div> html到这里暂时告一段落,下面开始学习css。
一.CSS基础语法
(双标签)标签属于html,作用就是给页面添加样式,写在标签内。1.1格式
选择器{属性一:值一;属性二:值二}
这里的选择器就是这种标签,可以用来选中,进行属性的添加。
例:<head> ... <style>div{width: 100%;height: 100px;background-color: red;}span{width:100%;hegit:100px } style> head> <body><div>这是一个块div><div>这又是一个块div><span>这是一个内联span> body>1.2基本样式
1.width:宽
2.height:高
3.background-color:背景颜色1.3长度单位
1.px:像素
2.%:百分比(百分比的填充选择器的外层容器)1.4CSS注释
1.语法
/*注释的内容*/
快捷键与html相同二.内联样式与内部样式
行为、样式、结构尽量分离,形成良好的习惯。
2.1内联(行内、行间)样式
在html标签上通过添加style属性来实现的
例<head> ...(没有style) head> <body><div style="width: 100%;height: 100px;background-color: red;">这是一个块div> body>2.2内部样式
注:内部样式的优点,可以复用代码
在
标签内添加的样式
例<head> ... <style>div{width: 100%;height: 100px;background-color: red;}span{width:100%;hegit:100px } style> head> <body><div>这是一个块div><div>这又是一个块div><span>这是一个内联span> body>2.3内部样式与内联样式的区别
内部样式的代码可以复用、且符合W3C的规范标准,让结构和样式分开处理
三.外部样式及两种写法
通过引入一个单独的css文件(例:name.css)来实现样式。有两种引的方法,一种是通过
标签,一种是通过@import引入(注:这种引入存在很多问题,不推荐使用)3.1
标签是当前页面与外部资源的一个映射关系,
标签定义文档与外部资源的关系。标签通常写在初始代码的和标签之间3.1.1rel属性
表示引入外部资源的类型,资源与页面的关系。
- 常用的rel属性值:点击这里
主要还是引入文档的外部样式表(文档的外部样式表的值为:stylesheet)
例
<head> ... <meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./库.css"><title>Documenttitle> head> <body> <div>这是一个块div> body>上述代码中的./库.css就是创建的单独的css文件
3.1.2
属性与html的href属性性质一样
四.CSS颜色表示法
css的颜色表示法分为三类,单词表示法、十六进制表示法、rgb三原色表示法。
4.1单词表示法
直接用单词来表示
例div{ background-color: red;}下面是一些颜色单词
black 黑色
gray 灰色,dimgray 暗灰色,darkslategray 深岩灰色
silver 银色,
white 白色 ,whitesmoke 烟白色,
red 红色,maroon 褐红色,
purple 紫色,fuchsia 紫红色,
green 绿色,olive 橄榄色,lime 绿黄色,aqua 浅绿色,darkolivegreen 深橄榄绿,palegreen 白绿色 ,seagreen 海绿色,darkgreen 深绿色
yellow 黄色,
blue 蓝色,navy 深蓝色,teal 绿中带蓝,violet 紫罗兰,midnightblue 深夜兰,lightskyblue 浅天蓝色,deepskyblue 深天蓝色,royalblue 宝蓝色,cornflowerblue 矢车菊色
gold 金色,orange 橙色,tomato 番茄色,firebrick 耐火砖色,lightyellow 浅黄色,yellowgreen 黄绿色,wheat 麦色,
cyan 青色,lightcyan 浅青色,turquoise 青绿色,lightgrey 浅灰色,
转载自:https://my.oschina.net/nickwill/blog/1964104.2十六进制表示法
十六进制:0123456789abcdef
用法:#000000为css中十六进制的最小值,#ffffff为最大值
例div{background-color:#000000;}4.3rgb三原色表示法
用法:rgb(0,0,0);
取值范围是0~255
例div{background-color: rgb(0,0,0);}4.4获取网页当中的颜色
1.fehelper
可以快速获得网页中颜色的十六进制的代码
2.ps软件五.CSS背景样式
背景样式有五个属性,分别为:
1.background-color:背景颜色
2.background-image:背景图片
3.background-repeat:背景图片的平铺方式
4.background-position:背景图片的位置
5.background-attachment:背景图随滚动条的移动方式
6.background-size:背景图片的大小5.1背景颜色
属性为:background-color
作用:可以给背景加上颜色
用法:div{background-color: rgb(0,0,0);} 或 <div style="background-color:red;">这是一个块div>5.2背景图片
属性为:background-image
作用:可以给背景加上图片
用法<div style="background-image:url(图片地址);">这是一个块div> 或 div{background-image:url(文件地址);}其中的url的作用是引入图片的地址,默认会铺满整个背景。
5.3背景图片的平铺方式
属性为:background-repeat
作用:可以改变图片的平铺方式
用法:<div style="background-repeat:repeat-x;">这是一个块div> 或 div{background-repeat:repeat-x;}repeat-x:只在x轴上平铺
repeat-y:只在y轴上平铺
repeat(x,y):x,y都进行平铺
no-repeat:都不平铺(并不是没有图片,只是图片为原始大小)5.4背景图片的位置
属性为:background-position
作用:可以改变背景图的位置
用法:<div style="background-position:100px 100px;">这是一个块div> 或 div{background-position:100px 100px;}上述xy的值不仅仅是像素,也可以用百分比
语法大体上是background-position:x y;
当xy大于0时,图片向右下偏移
当xy小于0时,图片向左上偏移
此外,xy还可以替换成单词
x有:left、center、right
y有:top、center、bottom5.5背景图随滚动条的移动方式
属性为:background-attachment
作用:
用法:<div style="background-attachment:scroll;">这是一个块div> 或 div{background-attachment:scroll;}可选值一般有
scroll:随着滚动条滚动(默认值,且背景位置是按照当前元素(块)进行偏移的)
fixed:固定,不随着滚动条滚动(背景位置是按照浏览器进行偏移的)5.6背景图片的大小
注:第一个值代表宽,第二个值代表高
属性为:background-size
有三种值:- 直接的像素值(…px …px)
例如:
div{background-size: 100px 100px;}- 百分比(…% …%)
例如:
div{background-size: 10% 10%;}根据父容器的百分比
- cover(覆盖)
会等比扩大或缩小图片,不会使图片的比例变得奇怪,然后再覆盖整个容器

例如:
div{background-size: cover;}- contain

六.背景实现视觉差效果
6.1原理(区分相同标签的方法)
内部样式中区分
的方法就是:在div前面加上#后面加上id值DOCTYPE html> <html lang="en"> <head>...<style>#div1{}#div2{}#div3{}style> <title>Documenttitle> head> <body><div id="div1">div><div id="div2">div><div id="div3">div> body> html>6.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"><style>#div1{width:2560px;height:1660px;background-image: url(../图片/1.jpg);background-attachment: fixed;}#div2{width:2560px;height:1660px;background-image: url(../图片/2.jpg);background-attachment: fixed;}#div3{width:2560px;height:1660px;background-image: url(../图片/3.jpg);background-attachment: fixed;}style> <title>Documenttitle> head> <body><div id="div1">div><div id="div2">div><div id="div3">div> body> html>一个简单的滚动视觉差页面
七.CSS边框样式
有三条基本属性
1.border-style:边框的样式
2.border-width:边框的大小
3.border-color:边框的颜色注:可以针对单一条边进行设置,但默认是全都设置,且这三个属性尽量一起使用。
7.1边框的大小
属性为:border-width
与上述width的值相同,也是px(像素)、%等7.2边框的颜色
属性为:border-color
与上述color的值相同,分为单词、十六进制、rgb三原色等7.3边框的样式
属性为:border-style
有三个值
solid:实线
dashed:虚线
dotted:点线7.4代码案例
<head> ...<style>div{width: 150px;height: 150px;border-width: 10px;border-color: aquamarine;border-style: solid;}style> head> <body><div>111div> body>若想只改动一条边,可以用border-方向单词-style(color、width)
例:border-left-style:solid;表示把左边的框变成实线
方向单词:top、right、left、bottom(下)八.边框实现三角形
8.1原理
设置边框样式时,相邻的边框相接时是斜线,由此来实现三角形
8.2练习
要用到透明颜色单词:transparent
例
DOCTYPE html> <html lang="en"> <head> ... head> <style>body{background-color: aqua;}div{width: 0px;height: 0px;border-left-color: blue;border-left-width: 30px;border-left-style: solid;border-right-color: transparent;border-right-width: 30px;border-right-style: solid;border-bottom-color: transparent;border-bottom-width: 30px;border-bottom-style: solid;border-top-color: transparent;border-top-width: 30px;border-top-style: solid;} style> <body><div>div> body> html>九.CSS文字样式
9.1字体类型
属性为:font-family
下面是一些值
英文字体:Arial、‘Times New Roman’…
中文字体:微软雅黑、宋体(中英文都能识别)…
中文字体的英文名称:
微软雅黑:‘Microsoft YaHei’
宋体:SimSun
例:DOCTYPE html> <html lang="en"> <head>... head> <style>div{font-family: 宋体;} style> <body><div>这是一段文字div> body> html>9.2衬线体与非衬线体
衬线体与非衬线体的区别

例如:宋体为衬线体,微软雅黑为非衬线体9.3注意事项
9.3.1设置多字体的方式
添加多字体的目的:适应更多的计算机
div{font-family: 字体一,字体二,字体三… ;}
计算机会先识别字体一,若没有字体一,则会识别字体二,以此类推,假如这些字体都没有,页面会自动显示默认字体,即微软雅黑。9.3.2引号的问题
若字体名称中出现空格,则需要用引号引起来,否则会出问题
例:'Times New Roman’有空格,需要引号
Arial没有空格,不需要引号9.4字体大小粗细样式
注:字体大小一般为偶数,尽量把字体设置成偶数
9.4.1字体大小
属性为:font-size
默认为16px
两种用法- 1.通过px(像素)直接设置
在属性后边的值中直接加上像素
例
DOCTYPE html> <html lang="en"> <head>... head> <style>div{font-size:30px;} style> <body><div>这是一段文字div> body> html>- 2.通过单词进行设置(了解,不推荐使用)
常见的单词值

在属性后边的值中直接加上单词
例DOCTYPE html> <html lang="en"> <head>... head> <style>div{font-size:x-small;} style> <body><div>这是一段文字div> body> html>9.4.2字体粗细
属性为:font-weight
两种用法- 在属性后边的值中直接加上数
这里的值只能是100、200、300…900之间的数,只有九个值。
虽然有九个值,但只有两种效果,即正常和加粗例
DOCTYPE html> <html lang="en"> <head>... head> <style>div{font-weight:100;} style> <body><div>这是一段文字div> body> html>- 在属性后边的值中直接加上单词
只有两个单词
1.normal(正常)2.bold(加粗)
例
DOCTYPE html> <html lang="en"> <head>... head> <style>div{font-weight:bold ;} style> <body><div>这是一段文字div> body> html>9.4.3字体样式
属性为:font-style
两种模式
1.normal(正常)2.inherit(斜体)oblique也是斜体,但平常用inherit
oblique与inherit的区别
inherit:带有倾斜属性的字体才可以进行倾斜操作
oblique:不带有倾斜属性的字体也可以进行倾斜操作例
DOCTYPE html> <html lang="en"> <head>... head> <style>div{font-style:normal ;} style> <body><div>这是一段文字div> body> html>9.4.4字体颜色
属性为:color
用法与上述的ground-color一样
例DOCTYPE html> <html lang="en"> <head>... head> <style>div{font-style:normal;color:red;} style> <body><div>这是一段文字div> body> html>十.CSS段落样式
10.1文本修饰与文本大小写
10.1.1文本修饰
属性为:text-decoration
有几种效果- 下划线:underline
- 上划线:overline
- 删除线:line-through
- 不添加任何装饰:none
注:可以添加多个效果
例
DOCTYPE html> <html lang="en"> <head>... head> <style>p{text-decoration:underline,overline,line-through;} style> <body><p>游戏发生在一个被称作“提瓦特”的幻想世界,在这里,被神选中的人将被授予“神之眼”,导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色,在自由的旅行中邂逅性格各异、能力独特的同伴们,和他们一起击败强敌,找回失散的亲人——同时,逐步发掘“原神”的真相p> body> html>10.1.2:文本大小写(只针对英文)
属性为: text-transform
只有大写和小写两种值
小写:lowercase
大写:uppercase
只针对首字母大写:capitalize
例DOCTYPE html> <html lang="en"> <head>... head> <style>p{text-transform:lowercase;} style> <body><p>aaaaaaaaaaaabbbbbbbcccccccccccccccdddddddddddddp> body> html>10.2文本缩进与文本对齐
10.2.1文本缩进
属性为:text-indent
作用:首行缩进
用法:- 在属性后边的值中直接加上像素
例
DOCTYPE html> <html lang="en"> <head>... head> <style>p{text-indent:32px;} style> <body><p>游戏发生在一个被称作“提瓦特”的幻想世界,在这里,被神选中的人将被授予“神之眼”,导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色,在自由的旅行中邂逅性格各异、能力独特的同伴们,和他们一起击败强敌,找回失散的亲人——同时,逐步发掘“原神”的真相p> body> html>- 用em单位,1em单位永远和字体大小相同
例
DOCTYPE html> <html lang="en"> <head>... head> <style>p{text-indent:2em;} style> <body><p>游戏发生在一个被称作“提瓦特”的幻想世界,在这里,被神选中的人将被授予“神之眼”,导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色,在自由的旅行中邂逅性格各异、能力独特的同伴们,和他们一起击败强敌,找回失散的亲人——同时,逐步发掘“原神”的真相p> body> html>10.2.2文本对齐方式
属性为:text-align
取值为:left(左)、right(右)、center(居中对齐)、justify(两端点对齐)
例DOCTYPE html> <html lang="en"> <head>... head> <style>p{text-align:center;} style> <body><p>游戏发生在一个被称作“提瓦特”的幻想世界,在这里,被神选中的人将被授予“神之眼”,导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色,在自由的旅行中邂逅性格各异、能力独特的同伴们,和他们一起击败强敌,找回失散的亲人——同时,逐步发掘“原神”的真相p> body> html>10.3文本的行高
10.3.1定义行高
行高:一行文字的高度
行高由三部分组成:
上边距、字体大小、下边距

行高的默认值不是一个固定值,而是随着当前字体的大小在变化
属性为:line-height
用法:- 在属性后边的值中直接加上像素
例
DOCTYPE html> <html lang="en"> <head>... head> <style>p{text-height:40px;} style> <body><p>游戏发生在一个被称作“提瓦特”的幻想世界,在这里,被神选中的人将被授予“神之眼”,导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色,在自由的旅行中邂逅性格各异、能力独特的同伴们,和他们一起击败强敌,找回失散的亲人——同时,逐步发掘“原神”的真相p> body> html>- 在属性后边的值中直接加上数字表示比例
例如:p{text-height:1;}表示行高为一个字的像素,p{text-height:2;}表示行高为两个字的像素
10.4文本间距和英文折行
10.4.1定义字间距
- 定义字之间的间距
属性为:letter-spacing
用法: 在属性后边的值中直接加上像素
DOCTYPE html> <html lang="en"> <head>... head> <style>p{letter-spacing:5px;} style> <body><p>游戏发生在一个被称作“提瓦特”的幻想世界,在这里,被神选中的人将被授予“神之眼”,导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色,在自由的旅行中邂逅性格各异、能力独特的同伴们,和他们一起击败强敌,找回失散的亲人——同时,逐步发掘“原神”的真相p> body> html>- 定义词之间的间距
属性为:word-spacing
只针对英文,对中文无作用
用法: 在属性后边的值中直接加上像素
DOCTYPE html> <html lang="en"> <head>... head> <style>p{word-spacing:5px;} style> <body><p>you are a good boyp> body> html>10.4.2强制折行(只针对英文)
在英语单词或是阿拉伯数字非常长时,段落不会自动折行
- 非常强烈的折行
属性为:word-break:break-all;
用法:直接在选择器中加上属性
例
DOCTYPE html> <html lang="en"> <head>... head> <style>p{word-spacing:5px;word-break:break-all;} style> <body><p>you are a good boyp> body> html>- 不是那么强烈的折行
可能会产生一些空白区域
属性为:word-wrap:braek-word;
用法:直接在选择器中加上属性
例DOCTYPE html> <html lang="en"> <head>... head> <style>p{word-spacing:5px;word-wrap:break-word;} style> <body><p>you are a good boyp> body> html>10.5文本与段落实现个人简介
10.5.1练习
css部分
<style>div{width: 900px;}h1{text-align: center;color: crimson;}h2{text-align: center;color: blanchedalmond;}#p1{font-style: italic;font-weight: bold;text-indent: 2em;}#p2{color:black ;line-height: 30px;text-indent: 2em;}#p3{text-decoration:underline;line-height: 30px;text-indent: 2em}#p4{text-indent: 2em;line-height: 30px;font-weight: bold;letter-spacing:5px;}style>html部分
<body><div><h1>...h1><h2>...h2><p id="p1">...p><h2>...h2><p id="p2">...p><h2>...h2><p id="p3">...p><h2>...h2><p id="p4">...p>div> body>10.6CSS复合样式
注:复合样式和单一样式尽量不要混写,如果非要混写,那么一定要先写复合样式再写单一样式。
原因:复合包含单一,若先写单一,复合会把单一覆盖掉常见的复合样式的属性有
background(背景)
border(边框)
font(文字)10.6.1定义
一个css属性只控制一种样式,叫做单一样式
一个css属性控制多种样式,叫做复合样式10.6.2复合的写法
复合写法有的是不需要关心值的顺序的,像background、border等
而有的需要关心顺序,像font等复合的写法是通过空格的方式来实现的
例- background:red url() repeat;
DOCTYPE html> <html lang="en"> <head>... head> <style>div{background:red no-repet center center;} styl> <body><div>you are a good boydiv> body> html>这里的第一个center是x轴,第二个是y轴,且这两个是一个整体,不能分开
- font:30px 宋体;
最少要有两个值,即size和family,且要先写size再写family,weight和style则不用按照顺序来
像:font:weight style size family
font:weight style size/line-height family
font的复合写法中不能写color属性DOCTYPE html> <html lang="en"> <head>... head> <style>div{font:30px 宋体;} styl> <body><div>这是一段帅气的文字div> body> html>十一.CSS选择器
11.1ID选择器及注意事项
11.1.1id选择器
写法
css:#id值{}
html:id=“值”
例DOCTYPE html> <html lang="en"> <head> ...<style> #div1{} #div2{} #div3{}style> <title>Documenttitle> head> <body><div id="div1">div><div id="div2">div><div id="div3">div> body> html>11.1.2注意事项
- 在一个页面中,id值是唯一的,不能重复出现。
- 命名规范:id值必须是字母、下划线(_)、中划线(-)和数字组成的,且命名的第一位不能是数字。
- 命名方式:驼峰式、下划线式、短线式。
- 驼峰式:searchButton(小驼峰)SearchButton(大驼峰,不建议使用)
- 下划线:search_small_button
- 中划线:search-small-button
创建带有id值的标签快捷方法
标签字母+#+id值+回车
例:div#c2(回车)就可以快速创建11.2CLASS选择器及注意事项
11.2.1class选择器
写法
css:.id值{}
html:class=“id值”
例DOCTYPE html> <html lang="en"> <head> ...<style> .box{}style> <title>Documenttitle> head> <body><div class="box">这是一个块儿div> body> html>11.2.2注意事项
- class选择器是可以复用的,可以出现多个class值。
- 可以添加多个class样式。
例
DOCTYPE html> <html lang="en"> <head> ...<style> .box{}.home{}style> <title>Documenttitle> head> <body><div class="box home">这是一个块儿div> body> html>- 添加多个样式时,样式的优先级根据css决定,而不是class中的顺序。
例
DOCTYPE html> <html lang="en"> <head> ...<style> .box{background:red}.home{background:blue}style> <title>Documenttitle> head> <body><div class="home box">这是一个块儿div> body> html>上述代码显示为蓝色。
这是一个块儿虽然这里box在home后边,但在css中home覆盖掉了box,所以显示蓝色- 标签+类的写法
意义:标签+class的样式
像:p.box、div.home
例
DOCTYPE html> <html lang="en"> <head> ...<style> p.box{background:red}p.home{background:blue}style> <title>Documenttitle> head> <body><div class="home box">这是一个块儿div><p class="home box">这是一个块儿p> body> html>此时,上述代码中box和home的样式只会在
中生效,而不会在中生效。本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈! - 用于
- 2. ``
- 1. ``
