Css简单认识

JavaWeb

简介:

css:层叠样式表

• 层叠: 一层一层的
• 样式表: 很多的属性和属性值

作用:

• 使得页面更加绚丽
• 提高代码的可维护性(样式抽离)

结合方式:

1. 在每个HTML标签上面,都有一个属性style,将css和Html结合在一起
   
   • 我是添加进来的一句话
2. 在Html的head里面写一个style标签

<style type="text/css">
div{
    background: greenyellow;
    color: blue;
}
</style>

1. 标签与2相同,但是以import来引入css文件

<style type="text/css">
@import url("css/css03.css");
</style>

1. 使用头标签link,引入外部css文件

<link rel="stylesheet" type="text/css" href="css/css03.css"/>

注意: 第三种方式,有些浏览器不起作用,一般使用第四种

优先级:

由上到下,由外到内,优先级由低到高

Css的选择器(三种):

要对哪个标签里面的数据进行操作

1. 标签选择器

使用标签名当做选择器名,比如使用div{}

<div>标签选择器</div>
div{
    background: palegoldenrod;
    color: black;
}

2. class选择器

给标签添加class属性

<div class="second">class选择器</div>
.second{
    background: lightblue;
    color: blue;
}

3. id选择器

给标签添加一个Id属性,通过Id给标签添加css效果

<div class="second" id="third">id选择器</div>
#third{
background: green;
    color: white;
}

上述三种选择器的优先级,由低到高

Css的扩展选择器

1. 关联选择器

嵌套的内容

设置div标签里面p标签的样式

div p{
    background: red;
}

2. 组合选择器

把不同的标签设置成相同的样子

<div >div里面的内容</div>
<p>p里面的内容</p>
div,p{
    background: palegoldenrod;
}

3. 伪元素选择器(了解)

css中提供了一些定义好的样式,可以直接拿过来使用

• 超链接的状态
  原始状态/鼠标触摸状态/点击状态/点击过的状态

a:link {
    background: red
}
a:hover{
    background: green;
}
a:active{
    background: blanchedalmond;
}
a:visited{
    background: white;
}

Css的盒子模型

边框

• border(border: 2px solid blue; 粗细,样式,颜色)
• border-top
• border-bottom
• border-left
• border-right

内边距

padding(上 右 下 左) 只填写一个,即四边同用

外边距

margin(同上)

Css的布局悬浮(了解)

这里操作的结果与视频中不一样,先不做考虑
float
- left: 文本流向对象的右边
- right: 文本流向对象的左边

Css的布局定位

position

• 属性值:
  
  • absolute:将对象从文本流中拖出
    
    • 可以使用top/bottom等属性进行绝对定位
  • relative:不会讲对象从文档流中拖出
    
    • 也可以使用属性进行绝对定位