<th></th>标签:
一般用于首行单元格，自带加粗和居中效果。
CSS 1.CSS介绍 CSS: Cascading Style Sheet 层叠样式表
作用:修饰和美化页面元素，实现网页排版布局
2.CSS使用 在HTML文档中使用CSS主要有三种方式：
1. 行内样式/内联样式
特点:
在具体的标签中使用style属性，引入CSS样式代码
语法:
<标签 style="CSS 样式声明">
1.CSS样式声明/语句
1.对当前元素添加样式
2.语法:
CSS属性:值;
2.注意:
CSS样式声明可以是多条
<标签 style="属性:值; 属性:值; 属性:值;"
2. 文档内嵌 / 内部样式表
特点:
将CSS代码与具体的标签相分离，在HTML文档中使用<style></style>标签引入CSS代码。
语法:
<style>
选择器1
选择器2
...
</style>
注意:
<style></style>可以书写在文档中的任意位置，但是基于样式优先的原则,一般写在<head></head>中
3. 外链方式 / 外部样式表
1.定义外部的.css文件，在HTML中引入即可，真正实现文档与样式表的分离。
2.语法
在外部的样式表中使用选择器定义样式，在HTML文档中使用<link>标签引入CSS文件。
3.引入: 一般在head标签中引入
<link rel="stylesheet" type="text/css" href="index.css">
3.样式表的特征 1.继承性
大部分的CSS属性都是可以被继承的；子元素或者后代元素可以继承父元素中的样式。所有的文本属性都可以被继承，块元素的宽度与父元素保持一致。
2.层叠性
允许为元素定义多个样式，共同起作用。
3.样式表的优先级
从低到高:
- 浏览器缺省设置(浏览器默认样式)
- 文档内嵌/外链方式
在不发生样式冲突时，样式共同起作用；如果发生样式冲突，后来者居上，最后定义的样式最终显示。
- 行内样式的优先级最高
4.常见CSS属性 1.设置字体大小
1.属性: font-size
2.取值: 以像素px为单位的数值，浏览器默认字体大小是 16px
et:
<div style="font-size:20px;">CSS介绍</div>
2. 设置字体颜色
1. 属性: color
2. 取值: 颜色英文单词、 ...
3. 设置背景颜色
1. 属性: background-color
2. 取值: 颜色的英文单词 ...
4.文本斜体显示
font-style:italic;
5.超链接取消下划线显示
text-decoration: none;
6.取消轮廓线(密码框,文本框等)
outline: none;
7.内容水平居中
text-align: center; (left/center/right，默认水平居左)
5.CSS选择器 1.选择器
1.使用文档内嵌方式引入CSS样式表时，实现了结构与样式相分离，但是需要自己定义选择器来匹配文档中元素，为其应用样式。
2.作用:
-规定页面中哪些元素能够应用声明好的样式
-匹配文档元素为其应用样式
3.语法:
- 选择器实际上由两部分组成:
选择器(符){
属性:值;
属性:值;
}
2.选择器分类:
1.标签选择器/元素选择器:
-使用标签名作为选择符，匹配文档中所有的该标签，并应用样式。
1.特点:
将标签名作为选择符，来匹配
2.et:
p{
color:yellow;
font-size:30px;
}
2.类选择器
特点:
通过元素的class属性值进行匹配
语法:
以英文.开头，跟上class属性值，中间没有空格。
et:
-为p标签定义样式<p class='c1'>文本内容</p>
.c1{
CSS样式
}
类选择器的结合使用
1. 标签名.类名
-中间没有空格，表示在指定的标签中匹配class属性值对应的元素
p.c1{
css样式
}
注意:
-标签名一定要写在前面
2. .类名1.类名2 (不常用)
3. 标签中使用两个类选择器的样式
在标签的clss属性中，定义两个或多个类属性值，用空格分开。
<p class="属性值1 属性值2">
3.ID选择器
1. id属性 作用
HTML中所有元素都有一个id属性，主要用来表示该元素在文本中的标志，具有唯一性。
2. id选择器
通过元素的id属性值进行匹配
3. 语法
#id属性值{
css样式
}
4. 注意:
通常网页中外围的结构化标签，都使用id进行标识，具有唯一性。
4.群组选择器
1. 作用
为多个选择器设置共同的样式
2. 语法
选择器1, 选择器2, 选择器3, ...{
css样式
}
et:
p,div,span{
background-color: pink;
}
5.后代选择器
1.作用
依托元素的后代关系来匹配元素(既包含直接子元素，也包含后代元素)
et:
<div>
<ul> --div的直接子元素
<li>内容1</li> --div的间接子元素
<li>内容1</li>
</ul>
<span></span> --div的直接子元素
</div>
2.语法
选择器1 选择器2{
css样式
}
-在选择器1对应的元素中匹配后代元素，后代元素需要满足选择器2
3.示例: 匹配#nav下的所有span元素。
#nav span{
css样式
}
6.子代选择器
1.作用
依托元素的子代关系进行匹配，只匹配直接子元素
2.语法
选择器1>选择器2{
css样式
}
-在选择器1对应的元素中匹配直接子元素，满足选择器2的要求。
7.伪类选择器
1. 分类
-超链接伪类选择器
-动态伪类选择器
2.作用
-主要是针对元素的不同状态去设置样式
1.超链接的不同状态
-访问前 link
-访问后 visited
-激活(鼠标点按不松) active
-鼠标滑过 hover
2.其他元素
-鼠标滑过 hover
-鼠标点击 active
3.表单控件
-获取到焦点时的状态 focus
-对文本框和密码框而言，当用户点击输入时，都视为获取焦点状态。
3.语法
a:link{
css样式
}
a:visited{
css样式
}
4.注意
-如果给超链接添加四种状态下的样式，必须按照以下顺序书写伪类选择器。
:link
:visited
:hover
:active
简称: 爱恨原则 LoVe / HAte
8.选择器优先级
-当多个选择器的样式同时应用到一个元素上时,要按照不同选择器的优先级来应用样式
-判断选择器的优先级,主要看选择器的权重(权值),数值越大,优先级越高
---------------------------------
|选择器 | 权值 |
|-------------------------------|
|标签选择器 | 1 |
|类选择器/伪类选择器 | 10 |
|id选择器 | 100 |
|行内样式 | 1000 |
---------------------------------
-如果是复杂的选择器(后代,子代),选择器最终的权值是各选择器权值之和.
6.尺寸单位与颜色取值 1.尺寸单位
1. px -像素,默认单位(常用)
2. % -参照父元素对应属性的值进行获取(常用)
3. in -inch(英寸) 1英寸 = 2.54cm
4. pt -磅 1磅 = 1/72英寸
5. cm
6. mm
2.颜色表示方法
1.英文单词
2.rgb(r,g,b)三原色
每一种三原色的取值范围(0 - 255)
et:
红色: rgb(255,0,0)
黑色: rgb(0,0,0)
3.rgba(r,g,b,alpha(阿尔法))
-设置颜色,还可以调整透明度
-三原色的取值范围(0 - 255)
-alpha取值范围: (0 - 1)
0:表示透明
1:表示不透明
-取小数表示半透明,整数部分的0可以省略不写
0.5 / .5
4.十六进制表示颜色
-三原色(0-255)转换为十六进制(0-9 a-f)表示颜色
1.长十六进制 6位表示方法
每两位表示一组,代表一种三原色
红色: #ff0000
黑色: #000000
2.短十六进制 3位表示方式
-浏览器会自动对每一位进行重复补全,最终补全为长十六进制
红色: #f00 补全为: #ff0000
黑色: #000
白色: #fff
7.元素分类 HTML中标签分为:
-块级元素
特点:
1.独占一行,不与其他元素共行显示
2.可以手动设置宽高
et:
div p h1~h6 ul ol table form
-行内元素
特点:
1.可以与其他元素或者文本共行显示
2.不能手动设置宽高,元素的大小由内容决定
et:
span i b label u s sub sup
-行内块元素
特点:
既可以与其他元素共行显示,也可以手动设置宽高
et:
img input
属性
可以通过vertical-align属性设置行内块元素左右元素与其 垂直对齐方式;取值: top/middle/bottom
注:
-vertical-align只在行内块元素中使用.
-行内元素是可以共行显示的,如果代码中出现了换行,页面最终显示效果上,行内元素之间会有空隙.
et:
<div>
<label>aaa</label><label>bbb</label>
<label>ccc</label>
</div>
-页面显示效果:
aaabbb ccc
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
