时间:2021-07-01 10:21:17 帮助过:19人阅读
一、外部样式
外部样式
哈哈我又变帅了
--》要写样式的时候,用什么格式
属性:值;
--》学习属性,查、使用
二、标签选择器
使用内嵌样式或外部样式
标签名{
//样式
}
凡是定义了标签悬着器的标签,都具有相同的样式
--》类选择器
1、定义语法
.类名{
//样式
}
如果需要使用在需要具备该属性的标签中加上一个class属性,值 就是该属性的类名
--》id选择器
1、定义语法
#id号{
//样式
}
在要使用的地方加上id 属性即可
注意:使用的时候id只能有一个,而class可以有多个,对于三个选择器的使用,有一个规范
1.同一的样式用标签
2.不同的样式用类
3.独有的样式用id(常常与JS一起 用)
2、选择器的声明
--》集体声明
声明一个选择器,将所有需要这个属性的标记写在前面用逗号隔开
p,a,span,h1{
//样式
}
--》全局声明
使用*号开头
*{
//样式
}
--》嵌套声明
嵌套选择器可以将
--将某一张表的样式改变
#tbl tr td{
//样式
}
--》伪选择器 (目前只能用在A标签上)
就是给一个标签,的某个状态添加样式的方法
语法:
标签:状态{
//样式
}
link 表示放上去以后
visited 点击以后
active 点击的时候
hover 鼠标放上去的时候
a:link,a:active{
font-size:30px;
color:blue
text-decoration:none;
}
a:hover{
font-size:30px;
text-decoration:underline; color:red;
}
a:active{
font-size:30px;
text-decoration:none;
color:green;
font-family:华文行楷;
}
四、文档流、定位
文档流就是从左往右从上到下的堆砌
position:fixed 脱离文档流
-->相对定位 absolute
相对定位脱离文档流,可以根据坐标定位带任何地方,位置只会停留在改变之前的地方,随着滚动条的拖动也会向上向下偏移。
#myid1{
border:1px solid;
border-color:red;
width:80px;
height:50px;
background-color:pink;
position:absolute;
right:0em;
bottom:0em;
}
--》绝对定位 fixed
绝对定位脱离文档流,可以根据坐标定位到任何地方,但是改变浏览器的时候需要js来控制,
不管滚动条怎么拖动其位置也不会改变
#myid1{
border:1px groove red;
background-color:orange;
width:100px;
height:50px;
position:fixed;
left;0px;
bottom:0px;
}
-->relative
坐标会根据脱离文档流之前的位置偏移。
#myid4{
border:1px outset cyan;
background-color:azure;
width:150px;
height:100px;
position:relative;
left:100px;
top:100px;
}