HTML标签 属性 网页的内容和样式
HTML 网页的内容
CSS 内容的样式
CSS概述
1、CSS:Cascading Style Sheets 层叠样式表
2、优点:内容和样式相分离,便于修改样式
CSS语法
1、CSS选择器,大括号
2、样式格式:属性名:属性值;(例如:font-size:12px;)
3、注释:/* 注释内容 */
4、规范:每一条样式声明语句都以分号结尾,并且每一条声明语句都单独一行
CSS添加方法
1、行内样式:
将样式的属性名和属性值直接添加到当前需要添加样式的元素的标签内部。例如:<p style="color:red;font-size:12px">我爱你中国</p>
2、内嵌(内联)样式:
(1) <head></head>
标签内部添加<style></style>
标签,然后在<style></style>
标签里面添加样式,例如:
<style>
p{
color:red;
font-size:16px;
}
</style>
(2)注意:
- 即使有公共css代码,也是每个页面都要定义的
- 适合文件很少,css代码也不多的情况
- 如果一个网站有很多页面,如果样式写在html文件里面,会导致每个文件都会变大,后期维护难度也很大
3、外联样式(单独文件):
(1)css样式写在单独的文件中,该文件以.css
结尾,该文件中定义样式
(2) 在html中的<head></head>
标签内引入外联样式文件,引入方式:
<link rel="stylesheet" href="外联样式文件的路径">
rel属性表示引入文件的类型,此处表示样式文件,href属性表示路径,路径最好是相对路径
(3)sublime中快捷方式:link:css
(4)优点:
- 页面结构HTML代码与样式CSS代码的完全分离
- 维护方便
- 如果需要改变网站风格,只需要修改公共CSS文件
- 可以在同一个HTML文档内部引用多个外部样式表
4、样式优先级:
- 多重样式可以层叠,可以覆盖
- 样式的优先级按照“就近原则”
- 行内样式>内嵌样式>链接样式>浏览器默认样式
CSS选择器
1、选择器类型
(1)标签选择器:以标签的名字命名,例如:
body{
backgroud-color:green;
}
h1{
font-family:"宋体";
}
p{
font-size:12px;
}
hr{
}
2、类别选择器:以点号.
加上class属性值命名,例如:
HTML部分代码:
<body>
<p>普通段落中的文字</p>
<p class="one">类别1</p>
<p class="one">类别1</p>
<p class="two">类别2</p>
<p class="two">类别2</p>
</body>
css部分代码:
<style>
p{
font-size:20px;
}
.one{
font-size:12px;
}
.two{
font-siez:16px;
}
</style>
(3)ID选择器:以点号#
加上id属性值命名,例如:
<body>
<p>普通段落中的文字</p>
<p id="one">类别1</p>
<p id="two">类别2</p>
</body>
css部分代码:
<style>
p{
font-size:20px;
}
#one{
font-size:12px;
}
#two{
font-siez:16px;
}
</style>
注意:id的属性值是唯一的,即整个html文件中只出现一次,而class属性值是不唯一的,即整个html文件中可以重复出现多次,可以作用于多个网页元素上面,方便设置相同的样式。
2、选择器的叠加用法:
(1)嵌套声明:
p span{
color:red;
}
表示p标签内部的span标签的样式设置,则不会影响其他标签内部的span标签的样式
(2)集体声明:用逗号隔开
h1,p{
text-align:center;
}
.one,.two{
background-color:red;
}
(3)全局声明:*
命名,针对所有的元素
*{
text-align:center;
}
3、类别类型和id样式的混合
(1)多个class选择器混用,用空格分开
<div class="one yellow left">...</div>
(2)id和class混用
<div id="my" class="one yellow left">
注意:id选择器不可以多个同时使用
CSS样式
一、文本与文字样式
1、单位与颜色
(1)单位
px
像素(最常见的)em
字符类型的单位,自适应用户所使用的字体 1em----表示1个字符%
百分比:HTML DOM树的继承关系
(2)颜色red,blue...
颜色名(W3C里面)rgb(x,x,x)
RGB值,三种基本颜色(红绿蓝)混合而成,每个颜色分量取值0-255,全部为0是黑色,全部为255是白色,其他时候三个值相等则为灰色rgb(x%,x%,x%)
RGB百分比值 0%-100% ,红色(100%,0%,0%)rgba(x,x,x,x)
RGB值,透明度;a值:0.0(完全透明)与1.0(完全不透明),0.0-1.0之间为半透明#rrggbb
十六进制,红色:#ff0000或者#f00
2、text样式
属性 | 描述 | 取值 |
---|---|---|
color | 文本颜色 | red #f00 rgb(255,0,0) |
letter-spacing | 字符间距 | 2px,-3px |
line-height | 行高 | 14px(垂直居中),1.5em ,120% |
text-align | 对齐 | center(水平居中),left,right,justify |
text-decoration | 装饰线 | none,overline,underline,line-through |
text-indent | 首行缩进 | 2em(首行缩进两个字符) |
3、font样式
属性 | 描述 | 举例 |
---|---|---|
font | 在一个声明中设置所有的字体属性 | font: italic bold 16px/1.5em ‘宋体’(一般顺序:斜体 粗体 字号/行高 字体) |
font-family | 字体系列 | font-family:“Microsoft YaHei”,sans-serif (当字体中带有空格则需要用双引号括起来,如果没有则可以不用双引号,多个字体用逗号隔开) |
font-size | 字号 | 14px 120% |
font-style | 斜体 | italic |
font-weight | 粗体 | bold |
4、背景样式
background-color
background-image:url(“图片路径+文件名”)
background-repeat:repeat,repeat-x(只有横向重复),repeat-y,no-repeat(表示不重复)
background:颜色 图片 repeat
注意:
- 当同时设置了背景图片和背景颜色则背景图片起作用,如果背景图片加载不出来则显示背景颜色
- 空元素(只有标签,标签里面没有内容)要设置背景样式,则必须先定义元素的宽度和高度
5、超链接样式
(1)链接的四种状态(:伪类选择器
)
- a:link 普通的、未被访问的链接
- a:visited 用户已访问的链接
- a:hover 鼠标指针位于链接的上方悬停
- a:active 链接被点击的时刻
(2)四种状态的顺序:
a:hover 必须位于a:link 和a:visited之后
a:active 必须位于a:hover之后
常用顺序巧妙记忆:L
ov
e&Ha
te
6、列表样式
无序列表ul和有序列表ol共用样式
属性 | 描述 | 取值 |
---|---|---|
list-style | 所有用于列表的属性设置于一个声明中 | |
list-style-image | 为列表项标志设置图像 | url(“图片路径+文件名”)函数 |
list-style-position | 标志的位置 | inside:样式向右缩进到列表区域之内outside(默认值):突出在列表的左侧 |
list-style-type | 标志的类型 | none(无标号),disc(默认值,实心圆),circle(空心圆),decimal(数字),lower-roman小写罗马数字… |
7、表格样式
(1)表格大小:width,height属性:宽、高
(2)表格边框:border属性 border-collapse属性用来合并默认的表格的样式 border-collapse:collapse;则将表格边框和单元格边框合并在一起
(3)奇偶选择器::nth-child(odd|even)
odd表示奇数行,even表示偶数行
tr:nth-child(odd){
background-color:red;
}
注意:tr父元素table的第一个子元素即为第一行
8、sublime Tex的基本操作
(1)html中引入外联文件:link:css
<link rel="stylesheet" href="">
(2)div#nav
<div id="nav"></div>
(3)div.nav
<div class="nav"></div>
(4)div#nav.bar
<div id="nav" class="bar"></div>