CSS简介

最新推荐文章于 2024-04-15 16:37:06 发布

西柚莲子羹

最新推荐文章于 2024-04-15 16:37:06 发布

阅读量131

点赞数

分类专栏：小新

本文链接：https://blog.csdn.net/G123626/article/details/104053841

版权

小新专栏收录该内容

14 篇文章 0 订阅

订阅专栏

#基本概念
1.css-cascading style sheet
2.我现在学习的是css2.0，最新版本为css3.0.
#网页设计中HTML，CSS，JavaScript地位。
HTML内容；CSS呈现（样式）；JS交互（比如:动态）
实现：内容与样式与交互的分离。
#CSS基本语法
选择器{
K：V
K：V
K：V
}
我现在写的样式表，都不叫编程。
学法：多观察，多做。必须记住样式表的属性和它对应的值。
#CSS能写在3个地方或者3种用法
1.行内样式：（坚决杜绝）
2.内联样式：学习阶段使用
3.外链样式：把样式表代码移出到一个单独的.css文件中。体现了内容与呈现的物理分离。
#选择器
1.标签名做选择器
只写标签名，不要加“<>”。
标签名做选择器会把当前页面上的所有这个类型的标签都选中。
2.id做选择器
每个页面标签都可以添加id。
标签id只必须遵循以下规范：
a.只能由字母，下划线，数字组成。
b.必须以字母开头。
c.不能与标签名同名。
d.尽量使用有意义的单词的缩写。（比如：nav（导航栏））
注意：
a.任何一个页面上不能出现同名的id。
通过实验，我们发现，如果出现同名的id，浏览器会把同名的id的元素都使用相同的样式修饰。但是并不代表你可以这样做。id是表示唯一性的：getElenentById（）
b.页面上任何一个元素，都可以被多个选择器同时选中，并且这多个选择器能同时作用于这个标签。也就是多个选择器选中同一个标签，他们的样式能叠加下来。这是为啥css叫“层叠”的一个原因。
c.如果多个选择器选中同一元素后，他们之间的样式有冲突，那么这个时候就存在一个选择器优先级的问题。（后期会介绍）。
##类选择器
1.用类名做选择器，必须在类名前打“.”。
2.所有的标签都可以有class属性。
3.class属性的名字与id命名规范一样。
4.一个标签的id名和class名甚至可以相同，但是千万不要这样做。
5.不同类型的标签可以从属于同一个class。
6.一个标签可以从属于多个不同的class。
a.不同的类名之间用“空格”隔开。
b.不允许在标签里出现2个class属性。任何一个HTML标签内部都不能出现相同名字的属性。
7.尽量使用原子化的类，少使用大而全的类。
8.样式表中，尽量使用class，尽量不用id做选择器。class上样式，id上行为。class是为样式表准备的，id是为JS准备的。document.getElementId() class表示同一类元素，但是我们在样式表中即使这一类只用一个标签，我们也用class不用id做选择器。
##后代选择器
1.注意后代选择器不是儿子选择器。
2. 后代选择器的意图是：表达出在页面上的某一部分（区域）之内的所有什么什么元素，样式设置为。
3. 语法：标记标记。。。。
##交集选择器
1.语法：标记.类名.类名。。。。。
##并集选择器（组选择器）
1.语法：多个选择器之间用逗号隔开，表示被选中的这些元素，都采用相同的样式，
#通配符*
1.*表示选中页面上所有元素。一般用来做初始化，但是不能那么做，因为效率太低。
#CSS的继承性
1.只能把自己的样式继承给后代元素，但不能影响父节点和兄弟节点。
2.什么属性的样式能继承下来：修饰文本样式的属性能被继承下来，比如（color，text-,font-,line-）。不是修饰文本样式的属性不能被后代继承下来，（比如盒子模型的属性，定位的属性，背景属性）。
#CSS的层叠性
1.层叠性指的是当css的样式产生冲突时的处理机制。
2.层叠性的优先级：算权重的算法，谁去权重大，就听谁的，权重小的就会被覆盖掉。
3.计算权重的方式：（id的个数，class的个数，标签名的个数）
4.id的优先级最高，class的优先级次之，标签名的优先级最低。并且三者之间不存在进位。（但实际上也是存在进位，255个进一位，所以根本没有意义。）
5.如果都选中了同一元素，并且权重计算都一样，听谁的？谁写在最后听谁的。
6.如果是继承过来的样式，权重是0（如果没有直接选中这个标签，你给他写的权重是0）。
7.如果大家都没有直接选中，权重都是0，这个时候有一个“就近原则”。
8.判断那个样式起作用：
a.先看有没有直接选中。
b.如果选中了，就计算权重。
c.如果权重都一样，谁写在最后谁起作用。
d.如果都没有选中，就采用就近原则。
#！important
1.important是个属性修饰符。
2.它的语法是：k:v !important;
3.只能提升一条语句的优先级，不能提升一个选择器的优先级。
4.它把被修饰语句的优先级提升到无穷大。
5.如果被层叠的样式都是用!important修饰，那么按照语句所在的选择器的权重来起作用。
6.如果是继承过来的样式，它的权重是0，!important属性无法提升权重为0的样式。
7.如果样式都是继承过来的，!important能否提升（能打破就近原则吗）
结果显示还是就近原则管用。
注意：内联样式无论权重多大，都干不过行内样式。但是，如果使用行内样式，就违背了我们内容与样式与交互相互分离的初衷，无论如何都不要使用行内样式。
#盒子模型
1.他讲了这样一个事实：在HTML里，在浏览器渲染页面时，所有元素都是要占据一定空间的，而且这个空间一定是一个矩形。在我们的浏览器中绝对不出现占据圆形，不规则图形这样的空间元素存在。简单地说，我们可以把页面上的所有元素当做一个盒子看。盒子有边框（border），内边距（padding)，内容区（content）。盒子与盒子之间有外边距（margin）。
2.内边距会影响盒子所占的实际空间大小。
3.盒子在浏览器中所占空间大小是由：border,padding,weight,hight共同作用的。
4.如果给盒子添加背景颜色，这个背景颜色将作用于整个盒子，包括padding部分和border部分。
5.盒子实际占有空间的大小是由三个属性决定的：border，padding，width。盒子的实际大小=（border-width）*2+（padding）*2+width
6.我们如何精确计算盒子的大小：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			margin-bottom: 20px;
		}
		.d1{
			width: 598px;
			height: 598px;
			border: 1px solid orange;
		}
		.d2{
			border: 1px solid green;
			padding: 249px;
			width: 100px;
		}
		.d3{
			width: 0px;
			border:300px solid red;
		}
	</style>
</head>
<body>
    <div class="d1"></div>
	<div class="d2"></div>
	<div class="d3"></div>
</body>
</html>

##border属性
1.border属性是由三个子属性构成（style，width，color），缺一不可，缺少任何一个子属性，都不能正常显示出边框。
2.各个浏览器，对于border-style的值，渲染出来的样子不是100%相同的。能做到100%相同的有：solid，double，dashed。
3.如果说有特殊样式的边框，还要求必须所有的浏览器100%的呈现效果一致，就只能使用图片。
4.在同一个盒子里，后出现的边框样式会覆盖先出现的边框样式，我们往往都先写一个合写的总得样式，然后再单独写某个方向上的边框样式，来达到某个方向上特殊的边框样式。
5.边框的各个子属性可以给一个值，表示四个方向上的样式都一样，
给两个值，分别代表的是（上下，左右），
给三个值，分别代表（上，左右，下），
给四个值，分别代表（上，右，下，左），（简单地说就是从上方向开始，顺时针转）。
##padding属性
1.padding也分上，下，左，右四个方向。
2.padding只有width一个属性，没有style，也没有color。
##标准文档流
1.标准文档流概念：他不是一个东西，也不是一个物件。他其实是浏览器渲染一个页面的规则：所有的页面元素，都要按照他下html文档中出现的先后次序，依次在浏览器中，从左上角开始，从上到下，从左到右的顺序依次显示。
2.标准文档流的几个性质：
a.空白折叠
b.高低不齐，底端
3.标准文档流把页面上的元素分成两大类
a.块级元素
在页面上的块级元素，单独占一行。
可以设置宽，高。
如果不设置宽度，那么它将默认的占满父盒子的宽度。
b.行内元素
与其他元素自动并排在一行上。
不能设置它的宽和高。它的宽和高就是它自己内容的宽和高。
c.哪些是块级元素，哪些是行内元素？
（1）会自动换行的元素是块级元素，不会自动换行的元素是行内元素。块级元素都是容器级标签，行内元素都是文本级标签。
（2）特殊的：p标签（文本级标签），但他是块级元素。
##块级元素与行内元素是能够相互转换的。
1.使用display进行转换。
2.display有两个值block（块级元素），inline（行内）。
现在无法实现即能设置宽高，又能让不同的块平排在同一行，原因是标准文档流的性质不允许这么做。所以，现在如果我们必须把网页的内容以这个样式来显示，就必须打破标准文档流的限制。
打破标准文档流的限制的方法有三种：
（1）浮动（2）相对定位（3）绝对定位。
##浮动（float）
1.浮动分为：左浮动（float left）和右浮动（float right）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 100px;
			background: green;
			float: left;
		}
		.box2{
            width: 500px;
			height: 100px;
			background: skyblue;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 100px;
			background: green;
			float: left;
		}
		.box2{
            width: 500px;
			height: 100px;
			background: skyblue;
			float: left;
			margin-left: 10px;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

3.浮动带来的特性：
    （1）浮动元素会脱离标准文档流。
    脱离了标准文档流的元素，就可以设置宽和高，而不用理会他是不是块级元素，还是行内元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 100px;
			background: green;
			/*float: left;*/
		}
		.box2{
            width: 500px;
			height: 100px;
			background: skyblue;
			/*float: left;
			margin-left: 10px;*/
		}
        .sp1{
            float: left;
            width: 200px;
            height: 50px;
            background-color: orange;
        }
        .sp2{
            float: left;
            width: 500px;
            height: 50px;
            background-color: #336699;
        }
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<span class="sp1">span1</span><span class="sp2">span2</span>
</body>
</html>

    （2）浮动的元素会相互贴靠。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box1{
			width: 500px;
			height: 200px;
			background: green;
			float: left;
		}
		.box2{
            width: 300px;
			height: 300px;
			background: skyblue;
			float: left;
			/*margin-left: 10px;*/
		}
        .box3{
        	width: 80px;
			height: 200px;
			padding: 10px;
			background: orange;
			float: left;
        }
        .f{
        	width: 900px;
        }
		/*
        .sp1{
            float: left;
            width: 200px;
            height: 50px;
            background-color: orange;
        }
        .sp2{
            float: left;
            width: 500px;
            height: 50px;
            background-color: #336699;
        }*/
	</style>
</head>
<body>
	<div class="f">
	    <div class="box1"></div>
	    <div class="box2"></div>
	    <div class="box3"></div>
	    <span class="sp1">span1</span><span class="sp2">span2</span>
    </div>
</body>
</html>

    （3）文字环绕现象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		span{
			font-size: 50px;
			color: red;
			float: left;
		}
	</style>
</head>
<body>
	<span>今</span>今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子今天是个好日子
</body>
</html>

    （4）收缩

##清除浮动（清除浮动带来的）
父盒子不能被浮动的子元素撑开高度。
1.给父盒子添加高度属性（height）。
注意;添加高度虽然能够清除浮动带来的影响，但是他会对我们的页面产生不好的限制，也就是父盒子不能自适应内容的多少。所以我们需要找到一种不用添加高，也能清除浮动的方法。
2.给第二个盒子添加属性：clear:both;
clear就是清除浮动的意思。（有三个值both,right,left)这个方法有个后遗症，就是垂直方向上的margin失效。原因还是因为父盒子没有高度
3.隔墙法
外墙法：
就是在两个互相影响的盒子中间，添加一个div，给他添加样式clear:both;和height: 20px;
隔墙法隔开的两个盒子，仍然是没有height的。
内墙法：
把墙修在第一个父盒子的内部，必须放在最后一个元素。
可以给父盒子撑开高度。
4. overflow
给内部有浮动的元素的父盒子，添加一个overflow:hidden;属性，就能够清除浮动对其他页面元素带来的影响。
overflow叫溢出
overflow:hidden;叫溢出隐藏
##外边距margin
1.margin也分为4个方向，与padding相同，
a.盒子居中 margin:0 auto;(使用这个语法水平居中的前提：①盒子必须有明确的宽度②只有标准六种的合资才能使用margin:0 auto居中③maigin:0 auto是使被修饰的盒子在父盒子的区域内部居中，而不能使盒子内部的文本居中对齐。文本居中对齐属性：text-align:center. )
b.margin的叠加（①水平方向上的margin是叠加的②垂直方向上的margin不叠加：margin的塌陷现象就高不就低）
##行高（line-height)
##font属性（有三条）
1.font-size
2.font-family
3.line-height
4.语法：font:字号/行高（可以用百分比）字体
一个盒子可以设置多个字体例：
font:字号/行高字体1，字体2（优先于字体一）
如果有英文字体和汉字可以设置不同的字体例：
font:字号/行高英文字体，汉字字体
所有的汉字都有个对应的英文名字。
做网页的时候不要用奇怪的字体。所有的字体，必须是客户端的电脑里有这样的字体才能够按你的意图来展示。所以你想用奇怪的字体，只能用图片。
##背景设置
1.背景颜色：background-color
①background-color：red:
②background-color:#336699(#rrggbb)
③background-color:#rgb(255,255,255)
2.背景图
①background-image
background-image: url(1.jpg);
background-repeat: repeat-x;
background-repeat: no-repeat;
background-position: top right;
background-position: 30px 30px;
如果同时设置了背景图和背景颜色，那么背景颜色就会被背景图盖住。
合成：background: url() no-repeat top right;
##精确的还原盒子
##超链接样式
伪类：
1.：link表示用户没点击过
2.：visited表示用户点击过的样式
3：hover 表示鼠标悬停在超链接之上的样式
4.：active 表示鼠标点下去但是不松手的样式
如果同时设置四个伪类，那必须按照lvha的顺序来写样式表代码。（顺序打乱会不起作用）
特例：text-decoration不能从父盒子继承给a标签。
##定位方式（有三种方式）
使用position:relative/absolute/fixed
1.相对定位：（position: relative;）要跟top/left/bottom/right搭配使用。相对定位的盒子不会脱离标准文档流，他的身体还在老家，只是灵魂出窍了。为啥叫相对定位：因为他是相对于自己原先位置进行调整的。用途：①盒子位置的维调整，②作为绝对定位的参照物
2.绝对定位：（position: absolute;）（1）绝对定位的盒子会脱离标准文档流。所以，绝对定位盒子将不在遵从标准文档流的性质，不管盒子是不是块级元素，都不需要display:block;就能设置它的width/height。（2）定位也是要搭配top/left/bottom/right。如果使用了top就不要再设置bottom，left和right也是如此。①没有参照物时的定位方式：如果是以top：页面的顶端，而不是浏览器的顶端，如果是bottom：浏览器首屏尺寸的底部。注意：不是页面的最底部。②如果有参照物时的定位方式（当绝对定位的盒子的祖先盒子声明了任意一种定位方式后，这个声明了定位方式的祖先盒子，就成了当前绝对定位的盒子的参照物。）：如果有参照物，那么绝对定位的盒子，将以参照物为标准，进行位移。如果好几层祖先盒子都声明了定位方式，这时候绝对定位的盒子已离自己最近的一层的，并且声明了定位方式的祖先盒子为参照物。（3）绝对定位的儿子，将无视父亲的padding。绝对定位时，是以参照无得边框为准的，不管它有没有padding。（4）绝对定位也可以用来做居中。
3.固定定位：（position:fixed;）
(1)固定定位就是相对于浏览器窗口的定位，页面不管怎么滚动，盒子的位置不变。
（2）固定定位会脱离标准文档流
（3）固定定位也要搭配top/bottom/left/right 来做具体的位移。
4.z-index
(1)z-index用来表示页面中的盒子谁盖着谁。
（2）它是一个属性，值是一个整数，没有单位，数大的盖住数小的。
（3）只有声明了定位的盒子（position），才能使用z-index，否则无效。
（4）如果盒子不写z-index属性那么他就是默认的z-index:0;，
（5）如果z-index的值相同，那么写在html文档中靠后的盒子会盖住写在靠前的盒子。
（6）从父现象
##背景设置
1.background-position不仅能设置背景图在盒子里停靠的位置。还能在图大盒子小的时候，选择在盒子里显示出图那一部分做背景。要先写x轴的偏移量，在写y轴的偏移量。

西柚莲子羹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS简介

#基本概念1.css-cascading style sheet2.我现在学习的是css2.0，最新版本为css3.0.#网页设计中HTML，CSS，JavaScript地位。HTML内容；CSS呈现（样式）；JS交互（比如:动态）实现：内容与样式与交互的分离。#CSS基本语法选择器{K：VK：VK：V}我现在写的样式表，都不叫编程。学法：多观察，多做。必须记住样式表的属...
复制链接

扫一扫