超文本链接
<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”