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选择器
案例:
<span class="s1"id="news_specail">新闻一</span>
一个元素最多有一个id选择器,但是可以有多个类选择器。
使用方法如下:
<元素 class=“类选择器1类选择器2”>
html部分
<span class="s1 cls1">新闻三</span>
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>
从案例我们看出,行内元素它值占能显示自己内容的宽度,而且他不会占据整行。
块元素它不管自己的内容有多少,会占据整行,而且会换行显示。
<html>
<head>
<link rel="stylesheet" type="text/css"href="b.css"/>
</head>
<span class="s1">span1</span>
<span class="s1">span2</span><input type="text"name="username"/>
<div class="s2">div1</div>
<div class="s2">div2</div><input type="text"name="username"/>
<p>段落</p>
<body>
</body>
</html>
块元素和行内元素的区别
行内元素之战内容的宽度,块元素不管内容多少要占全行。
行内元素之能容纳文本和其他行内元素,块元素可以容纳文本,行内元素和块元素。(与浏览器类版本和类型有关)
一些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在布局起到一个控制整个内容显示位置 -->
<div class="div1">
<!-- ul在布局作用是可以控制显示内容的多少 -->
<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,不过其包含是视窗本身。