超文本链接
<a></a> 行内标签
href 路径
路径：
本地：index.html
外部：http:www.baidu.com/
…/返回上一层
锚点：
1.设置一个锚点
<a name="dd"></a>
<div id="dd"><>/div>
2.返回顶部
<a href="#dd">返回顶部</a>【同页面跳转】
<a href="index.html#aa">返回顶部</a>【不同页面】
复合型选择器
1.交集选择器
有两个选择器组成，第一个是标签选择器，第二个是类选择器，两个选择器
中间不能有空格
p.int{ }
2.并集选择器
.a1,.a2{ 样式能同时加在a1和a2}
class="a1 a2"
3.后代元素选择器
查找所有符合条件的后代：儿子和孙子，重孙子都是后代
.new li{
color: rgb(233, 38, 38);
}
4、查找所有符合条件的后代，只查找儿子辈
<div class="ban">
<p>1</p>
<p>2</p>
<p>3</p>
<span><p>4</p></span>
</div>
5.兄弟元素选择器
紧跟期后的第一个标签（之查找后面标签，前面的标签不管，就差找一个）
div+p{ }
6.相邻元素选择器
紧跟其后的所有标签（只查找后面标签，前面的标签不管，查找所有）
div~p{ }
7.属性选择器
a[href]{}
a[href][title]{color:red;}
a[href="index.html"]{color:red;}
伪类：（伪造 class类）
链接不同的状态：
- a:link{ 未访问链接的时候 }
- a:visited{ 已访问的链接 }
- a:hover{ 鼠标经过 } //常用
- a:active{ 鼠标按下 } //常用
当时四个伪类使用的时候，使用顺序不能改变。如果四个一起使用基本是在a标签里使用。
也可以单独使用。如单独使用基本只会使用后两个。
transition:2s; 时间延迟两秒。单位：/秒s
通过伪类查找元素：【所有标签都可以查，标签通用】
- p:first-child{查找第一个p标签}
- p:last-child{查找最后一个p标签}
- p:nth-child（n）{查找第n个p标签}
:focus 可以设置输入框在聚焦时的样式【聚焦：有小竖线 失焦：没有小竖线】
<style>
.a1 p:nth-child(3){
color:rgb(21, 241, 21);/*更精确*/
}
</style>
</head>
<body>
<div class="a1">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
</body>
</html>
伪元素：伪造的标签
- :first-letter 选择元素第一个字母
- :first-line 选择元素第一行
- :before 在元素之前添加内容
- :after 在元素之后添加内容
配合content:“内容”
案例:
div::before{
content: "hahaha";
color: blue;
font-size: 20px;
}
div::before{
content:url(img/aaa.jpg)
}
英文字母和数字换行:
word-wrap:break-word;
权重(优先级) 用在选择器
!important > 行内样式 > id > class类 > 标签 >子选择器（ul < li）>后代选择器（li a）>伪类选择（a:hover,li:nth-child）
权重的计算:
行内样式 +1000
id +100
属性/class类/伪装 +10
标签选择器/伪元素 +1
案例:
body .it p { 12 }
div p span { 3 }
#aa .con span { 111 }
提升权重:!important
继承性:
css子类会继承最高元素的属性,子元素的子元素也一样
1、字体系列属性
- font-family：字体系列
- font-weight：字体的粗细
- font-size：字体的大小
- font-style：字体的风格
2、文本系列属性
- text-indent：文本缩进
- text-align：文本水平对齐
- line-height：行高
- word-spacing：单词之间的间距
- letter-spacing：中文或者字母之间的间距
- text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
- color：文本颜色
3、元素可见性：
visibility：控制元素显示隐藏
4、列表布局属性：
list-style：列表风格，包括list-style-type、list-style-image等
5、光标属性：
cursor：光标显示为何种形态
table表格
tr 行
td 列
自带的属性
- width
- height
- border
- cellspacing 行间距 调整行与行之间的间距
- cellpadding 列间距 调整列与列之间的间距
- align=“center” 对齐方式
- 合并行：rowspan
- 合并列：colspan
verticle-align:垂直居中 属性：center top bottom
form表单【搜索】
method=“” 提交方式
get 明文提交 不安全 传值（传输量的比较大，传输信息不太重要）】
post 隐藏提交 安全 登陆注册
action=“” 提交地址
<input/>输入框 单标记- type 类型
- text 文本类型
- password 密码类型
- radio 单选类型
- checkbox 多选类型
- textarea 文本域
- rows 高
- cols 宽
- resize：none；禁用文本域重置大小功能
- select 下拉列表
- option 下拉列表项
注：默认显示第一个
按钮：
- submit 提交按钮
- reset 重置按钮
- button 按钮类型
<button>按钮</button>
单选多选默认选择:checked=“checked”
单选多选不可点击：disabled=“disabled”
下拉列表默认选项：select=“select”
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
