CSS

来源：互联网发布：java逆序输出字符串编辑：程序博客网时间：2024/06/06 11:46

一 CSS简介

（Cascading Style Sheets）是层叠样式表用来定义网页的效果显示。可以解决HTML代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

层叠：一层一层的

样式表：有很多的属性和属性值

二 CSS和HTML的四种结合方式（四种）

1 在每个HTML标签上都有一个属性—style。把CSS和HTML结合在一起

<html><head><title>CSS和HTML的结合</title></head><body><div style="background-color:red;color:green"> 三千繁华，弹指刹那，百年之后，不过一捧黄沙</div></body></html>

2 使用HTML的一个标签实现<style>标签，写在head里面

<html><head><title>CSS和HTML的结合</title><style type="text/css">div{background-color:blue}</style></head><body><div> 三千繁华，弹指刹那，百年之后，不过一捧黄沙</div></body></html>

3 在style标签里面，使用语句@importurl(CSS文件的路径)

第一步，创建一个CSS文件:demo.css

demo.css文件代码：

<style>            div{background-color:blue}</style>

HTML代码

<html><head><title>CSS和HTML的结合</title><style type="text/css">@import url(demo.css);</style></head><body><div> 三千繁华，弹指刹那，百年之后，不过一捧黄沙</div></body></html>

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

css代码同上

<html><head><title>CSS和HTML的结合</title><link rel="stylesheet" type="text/css" href="div.css"/></head><body><div> 三千繁华，弹指刹那，百年之后，不过一捧黄沙</div></body></html>

第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式

三 CSS的优先级

样式优先级

由上到下，由外到内。优先级由低到高（后加载的优先级高）

代码规范：

选择器名称{ 属性名：属性值; 属性名：属性值; ......} //冒号与分号都是英文格式

属性与属性之间用分号隔开

属性与属性值直接使用冒号链接

如果一个属性有多个值的话，那么多个值用空格隔开。

四 CSS的基本选择器

CSS选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器

CSS选择器的类型

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

HTML标签选择器。使用的就是HTML的标签名

<style>            div{background-color:blue}</style>

class选择器（.）。其实使用的标签中的class属性

每个HTML标签都有一个属性class。

HTML的body中：

<p class="clazz">三千繁华</p>

在head的style中：

p.clazz{color:red}

id选择器（#）。其实使用的是标签中的id属性

每个标签都有一个属性id.

HTML的body中：

<p id="ID">三千繁华</p>

在head的style中：

p#ID{color:red}

五 CSS的基本选择器的优先级

style> id选择器大于class选择器 class选择器优先级大于标签选择器

六 CSS的扩展选择器

1 关联选择器

<div><p>wwwww</p></div>

设置div标签里面p标签的样式，嵌套标签里面的样式

<html><head><title>扩展选择器</title><style type="text/css">div p{background-color:green;}</style></head><body><div> 三千繁华，<p>弹指刹那<p>，百年之后，不过一捧黄沙</div><p>关联选择器</p></body></html>

2 组合选择器

把不同的标签设置一样的样式

<html><head><title>组合选择器</title><style type="text/css">div,p{background-color:blue;}</style></head><body><div> 三千繁华，弹指刹那，百年之后，不过一捧黄沙</div><p>组合选择器</p></body></html>

3 伪元素选择器

超链接的状态：

原始状态：:link

鼠标放上去状态：:hover

点击：:active

点击之后：:visited

<html><head><title>伪元素选择器</title><style type="text/css">a:link{background-color:red;    }a:hover{background-color:green;}a;active{background-color:blue;}a:visited{background-color:gray;}</style></head><body><a href="href://www.baidu.com.cn" target="_blank">超链接一</a></body></html>

七 CSS的盒子模型

div+CSS

在进行布局前需要把数据封装到一块一块的区域内，这个区域的专业术语叫盒子。

1 边框（border）：可统一设置，也可分别设置

上：border-top

下：border-bottom

左：border-left

右：border-right

2 内边距：文本内容距离div四条边的距离

padding:统一设置

padding-top.......同边框

3 外边距：div距离外边的距离

margin：同上

<html><head><title>CSS盒子模型</title><style type="text/css">div{width:200px;height:100px;border:2px  solid  blue;}#div12{border-right:2px   dashed yellow}#div11{padding-top:20px;}#div13{margin-top:20px;}</style></head><body><div id="div11">AAAAAAAAAAAAAAAAAAA</div><div id="div12">BBBBBBBBBBBBBBBBBBBB</div><div id="div13">CCCCCCCCCCCCCCCCC</div></body></html>

八 CSS的布局的漂浮

float（漂浮）

none:默认值。对象不漂浮

left：文本流向对象的右边

right：文本流向对象的左边

在某些浏览器上不好使

<html><head><title>CSS布局的漂浮</title><style type="text/css">div{width:200px;height:150px;border:2px  solid  blue;}#div11{float:left;}</style></head><body><div id="div11">AAAAAAAAAAAAAAAAAAA</div><div id="div12">BBBBBBBBBBBBBBBBBBBB</div><div id="div13">CCCCCCCCCCCCCCCCC</div></body></html>

九 CSS的布局的定位

position

static：默认值，无特殊定位，对象遵循HTML定位规则

absolute：将对象从文档流中拖出，使用left，right，top，bottom等属性对其进行绝对定位。

relative：不会把对象从文档流中拖出去，对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。

<html><head><title>CSS布局的定位</title><style type="text/css">div{width:200px;height:150px;border:2px  solid  blue;}#div11{background-color:red;position:absolute;top:80px;left:120px;}#div12{background-color:green;position:relative;top:50px;left:50px;}#div13{background-color:orange;}</style></head><body><div id="div11">AAAAAAAAAAAAAAAAAAA</div><div id="div12">BBBBBBBBBBBBBBBBBBBB</div><div id="div13">CCCCCCCCCCCCCCCCC</div></body></html>

十案例—图文混排

<html><head><title>案例—图文混排</title><style type="text/css">#imgtext{width:400px;height:300px;border:2px  solid  blue;border:2px dashed orange;}#div11{float:left;}#div12{color:blue;}</style></head><body><div id="imgtext"><div id="div11"><img src="aa.jpg" width="250" height="200"/></div><div id="div12">三千繁华，弹指刹那，百年之后，不过一捧黄沙。三千繁华，弹指刹那，百年之后，不过一捧黄沙。三千繁华，弹指刹那，百年之后，不过一捧黄沙。三千繁华，弹指刹那，百年之后，不过一捧黄沙。三千繁华，弹指刹那，百年之后，不过一捧黄沙。三千繁华，弹指刹那，百年之后，不过一捧黄沙。三千繁华，弹指刹那，百年之后，不过一捧黄沙</div></div></body></html>

十一案例—图像签名

在图片上面显示文字

<html><head><title>案例—图像签名</title><style type="text/css">#div12{position:absolute;top:250px;left:30px;}</style></head><body><div id="div11"><img src="77.jpg" width="400" height="300"/></div><div id="div12">三千繁华，弹指刹那，百年之后，不过一捧黄沙。</div></body></html>

0 0