css

来源：互联网发布：spring boot show sql 编辑：程序博客网时间：2024/05/16 05:36

css使用的必要性
css使用的基本语法
选择器{
属性1：属性值;
属性2；属性值；
}

选择器是css中非常重要的概念，css中有四种不用的选择器。
1，类选择器又叫class选择器
.类选择器{
属性名：属性值；
}
2，id选择器

#id{

background-color:silver;
font-size:40px;
}

3，html选择器

某个元素{

属性名：属性值。。。。。

}
4，通配符选择器
简单的说，选择器就是css中创建，而在网页页面（html，jsp,php
,asp,net）中使用。

案例

再比如，我们希望所有的超链接

（1）默认样式是黑色，24px没有下划线。

（2）当鼠标移动到超链接时，自动出现下划线。

（3）点击后，超链接变成红色。这又该怎么实现呢？[test.html]

/*父子选择器 (组合) */
#id1 span{
color:red;
font-style:itatalic;
}
#id1 span span{
color;green;
}

#id1 span span a{
color;blue;
}

通过上面总结：

父子选择器可以有多级（但实际开发中不要过3层）

父子悬着器有严格的层级关系

父子选择器不局限于什么类型选择器。

比如

#id span span

.s1 #id span

div #id .s2

一个元素可以同时又id选择器和class选择器

案例：

一个元素最多有一个id选择器，但是可以有多个类选择器。

使用方法如下：

<元素 class=“类选择器1类选择器2”>

html部分

css部分

.s1{
background-color:pink;
font-weight:bold;
font-size:16px;
color:black;
}

/* 给新闻三在配置一个class选择器 */
.cls1{
font-style:italic;
text-decoration:underline;
}

特别注意：当两个两个类选择器发生冲突，则以写在css文件中的后面那个类选择器为准。

我们可以把某个CSS文件中的选择器共有的部分，独立出来写一份

说明CSS文件本身也会被浏览器冲服务器下载到本地，才能显示效果。

行内元素，又叫内联元素：

内联元素只能容纳文本或者其他内联元素，常见元素<span><a>

块元素：

块元素一般都从新行开，可以容纳文本，其他内联元素和其他块元素，即使内容部能沾满一行，

块元素也要把整行占满。常见块元素<div><p>

从案例我们看出，行内元素它值占能显示自己内容的宽度，而且他不会占据整行。

块元素它不管自己的内容有多少，会占据整行，而且会换行显示。

块元素和行内元素的区别

行内元素之战内容的宽度，块元素不管内容多少要占全行。

行内元素之能容纳文本和其他行内元素，块元素可以容纳文本，行内元素和块元素。（与浏览器类版本和类型有关）

一些css属性对行内元素不生效，比如margin，left，right，width，height。建议尽可能使用块元素定位。（与浏览器类版本和类型有关）

行内元素和块元素可以转换

使用

display:inline;表示使用行内元素方式显示

display:block;表示使用块元素的方式显示

css文件之间的相互引用指令。

标准流和非标准流

流：html元素在网页显示的顺序。

标准流：在html文件中写在前面的元素在前面显示，写在后面的html元素在后面显示

非标准流：在html文件中，当某个元素脱离了标准流，那么它就处于非标准流。

css中的盒子模型

要搞清盒子模型美酒必须先明白下面几个概念：

子啊网页设计中常听的属性名：内容，填充，边框，边界，css盒子模式都具备这些属性。

盒子模型的经典案例：

html：

<!doctype html public"-//w3c//dtd html 4.01 transitional//en" "
http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<title>盒子模型案例</title>
<link rel="stylesheet"type="text/css"href="c.css"/>
</head>
<body>
<div class="div1">
<img src="杯子.jpg"/>
</div>
</body>
</html>

css：

body{
border:1px solid red;
/* 1px表示边框的宽度 solid实线 red表示颜色 */
width: 500px;
height:500px;
/* 如何让body自动居中 */
margin:0 auto;
/* auto表示自动居中 */
}
/* 盒子模型的概念：margin,padding ,border,content*/
.div1{
width:50px;
height:50px;
border:1px solid blue;
/* margin-top:5px;
margin-left:5px; */
margin:5px 0px 0px 5px;
/* padding-top:35px; */
}
.div1 img{
width:40px;
height:40px;
margin-top:5px;
margin-left:5px;
}

盒子模型—理解

我们可以把盒子模型转移到我们日常生活中的盒子（箱子）上来理解。

日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装东西；

而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其他抗震的辅料；

边框就是盒子的本身；至于边界则说明盒子摆放的时候不能全部堆在一起，要留有一定的空隙保持通风，

同时也为了方便取出。

与现实生活中盒子不同的是，现实生活中的东西一边不能大于盒子，否则盒子会撑坏的，而CSS盒子具有弹性，

里面的东西打过盒子本身最多把它撑大，蛋它不会损坏。

盒子模型浮动

html

<!doctype html public"-//w3c//dtd html 4.01 transitional//en" "
http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="b.css"/>
</head>
<body>

<div class="div1">

<ul class="faceul">
<li>
<img src="杯子.jpg"/>
</li>
<li>
<img src="杯子.jpg"/>
</li>
<li>
<img src="杯子.jpg"/>
</li>
<li>
<img src="杯子.jpg"/>
</li>
<li>
<img src="杯子.jpg"/>
</li>
<li>
<img src="杯子.jpg"/>
</li>
<li>
<img src="杯子.jpg"/>
</li>
<li>
<img src="杯子.jpg"/>
</li>
<li>
<img src="杯子.jpg"/>
</li>
<li>
<img src="杯子.jpg"/>
</li>
<li>
<img src="杯子.jpg"/>
</li>
<li>
<img src="杯子.jpg"/>
</li>
</ul>
</div>
</body>
</html>

css文件

.div1{
width:500px;
height:300px;
border:1px solid gray;
margin-left:200px;
}
.faceul{
width:400px;
height:250px;
border: 1px solid red;
padding-left:15px;
margin-left:10px;
}
.faceul li{
list-style-type:none;
float:left;
/* 左浮动 */
width:50px;
height:52px;
border: 1px solid red;
margin-right:5px;
margin-top:15px;

}
.faceul li img{
width: 40px;
height:40px;
margin-left:5px;
margin-top:5px;
}

浮动

在div+css中浮动分为左浮动，右浮动，清除浮动。

右浮动，指一个块元素向右移动，让出自己空间，向右移动直到碰到包含

自己的父元素的最右边的边框。

左浮动

案例：

.div1{
width:150px;
height:100px;
border:1px solid blue;
background:pink;
margin-top:5px;
/* 左浮动 */
float:left;

从这个案例我们可以看出，所谓左浮动就是指，每个块元素尽量向左边移动，这样就让出它右面的空间。

让别的块元素显示。

浮动的贴别说明

如果浮动元素的高度不同，那么它们向下移动时可能被其他浮动元素卡住直到有足够的空间。

如果是同浮动属性：则该元素不管是不是块元素，都会按照displayblock来显示

你可以这么理解浮动：如果以个元素右/左浮动则：

它本身会尽可能向右向左移动，直到碰到边框或者别的浮动元素，特别强调

浮动对块元素和行内元素都生效。

元素向右/左浮动，就相当于自己让出自己的左/右边，别的元素就会在它的左/右边排列。

常见的定位有四种：

1，static定位（默认的）

2，relative相对定位

3，absolute绝对定位

4，fixed固定定位。

static（默认值）：元素框正常生成。块级元素生成一个矩形框，作为文档/便准流的一部分，

行内元素则会创建一个或多个行框，至于其父元素中。

relative：元素框便宜某个距离。元素仍保持其未定位钱的形状，它原本所占的空间仍保留，

从这一角度看，好像该元素仍然在文档流/标准流中一样。

absolute：元素框从文档流完全删除，并相对于其包含块定位，。包含块可以使文档中的另一个元素或者是初始包含块。

元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样，元素定位后生成一个块级框，

而不论原来它在长长口中生成何种类型的框。

fixed：元素框的表现类似于将position设置为absolute，不过其包含是视窗本身。