一、选择器
作用:选择页面上的某一个后者某一类元素
基本选择器
1.标签选择器
格式:标签{}
<h1>666</h1>
<style>
h1{
css语法
}
</style>
2.类选择器
格式:.类名{}
<h1 class="name">666</h1>
<style>
.name{
css语法
}
</style>
3.id选择器
格式:#名称{}
<h1 id="name">666</h1>
<style>
#name{
css语法
}
</style>
高级选择器(只说一个id+class
组合)
格式:id
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: aquamarine;
text-align: center;
color: gray;
text-decoration: none;
margin-right: 5px;
line-height:50px;
font: bold 20px/50px Arial;
}
/*
属性名,属性名 = 属性值(正则)
= 表示绝对等于
*= 表示包含
^= 表示以...开头
$= 表示以...结尾
存在id属性的元素
a[]{}
*/
a[id]{
/*
a标签使用id的元素
*/
background: deeppink;
}
a[id=first]{
/*
id=first的元素
*/
background: greenyellow;
}
a[class*="links"]{
/*
class 中有links的元素
*/
background: green;
}
a[href^=http]{
/*
选中href中以http开头的元素
*/
background: aquamarine;
}
a[href$=pdf]{
/*
选中href中以http开头的元素
*/
background: aquamarine;
}
</style>
<p class="demo">
<a href="https://www.taobao.com/" class="links item first" id="first">淘宝</a>
<a href="" class="links item active" target="_blank " title="test">链接</a>
<a href="img/hello.html" class="links item">网页</a>
<a href="img/str1.png" class="links item">png</a>
<a href="img/str2.jpg" class="links item">jpg</a>
<a href="abc" class="links item">链2</a>
<a href="/fy.pdf" class="links item">pdf</a>
<a href="/quit.pdf" class="links item">pdf2</a>
<a href="dump.doc" class="links item">doc</a>
<a href="kiko.doc" class="links item last">doc2</a>
</p>
二、美化
1.字体 font
- font-family:字体
- font-size:字体大小
- font-weight:字体粗细
- color:字体颜色
2.文本样式 text
- 文本对齐方式:
text-align:center
- 首行缩进:
text-indent:2em
- 行高:
line-height:300px
- 下划线:
text-decoration
- text-decoration:underline /下划线/
- text-decoration:line-through /中划线/
- text-decoration:overline /上划线/
- text-decoration:none /超链接去下划线/
- 图片、文字水平对齐
img,span{
vertical-align: middle;
}
6.文本阴影
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
<h1>文本阴影效果!</h1>
3.超链接伪类
<style>
/*超链接有默认的颜色*/
a{
text-decoration: hotpink;
color: #000000;
}
/*鼠标悬浮的状态*/
a:hover{
color: dodgerblue;
}
/*鼠标按住未释放的状态*/
a:active{
color:green
}
/*点击之后的状态*/
a:visited{
color:mediumpurple;
}
</style>
列表 ui li
有序 ui li
无序 ol li
list-style-type: circle
list-style-type: square
list-style-type: upper-roman
list-style-type: lower-alpha
背景
1.背景颜色 background-color
2.透明度 opacity
3.背景图片 background-image: url("name.jpg")
三、盒子模型
- margin:外边距;
- padding:内边框;
- border:边框;
margin-left/right/top/bottom 表示四边,可分别设置,也可以同时设置如下 .
/* 分别表示上、右、下、左;从上开始顺时针 */
margin:0 0 0 0
/* 例1: 居中 auto表示左右自动 */
margin:0 auto
/* 例2:表示上、右、下、左都为4px */
margin:4px
/* 例3: 表示上为10px,左右为20px,下为30px */
margin:10px 20px 30px
四、浮动float 可以管横着排列
的
可以创建浮动框,将其移到一边,直到左边缘
或右边缘
触及包含块或一个浮动框的边缘
添加浮动之后,属性标签具有块级元素
的特征
浮动属性
属性值 | 描述 |
---|---|
none | 元素不浮动(默认) |
left | 元素左浮 |
right | 元素右浮 |
文档流
1.块级元素:独占一行
2.行内元素:不独占一行
注:行可以在块里面,反之则不可以。display可以打破。
dispaly 块可以内嵌在行里面
- block:块元素;
- inline:行内元素;
- inline-block:是块元素,但是可以内联,在一行;
这也是一种实现行内元素排列的方式,但是我们很多情况用float。
<style>
div{
width: 100px;
height: 100px;
border: 1px solid darkorange;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid darkorange;
display: inline-block;
}
</style>
<div>div块元素</div>
<span>span行内元素</span>
五、定位 position
有五个不同的位置值:
-
static(默认) :静态定位的元素不受 top、bottom、left 和 right 属性的影响
-
relative :的元素相对于其正常位置进行定位。
-
fixed :的元素是相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
-
absolute :的元素相对于最近的定位祖先元素进行定位(而不是相对于视口定位,如 fixed)。
然而,如果绝对定位的元素没有祖先,它将使用文档主体(body),并随页面滚动一起移动。 -
sticky :的元素根据用户的滚动位置进行定位。
-
z-index :设置元素的堆叠顺序。