粉阿吉整理(2)之------CSS

最新推荐文章于 2021-08-04 16:16:28 发布

阿星始于现在

最新推荐文章于 2021-08-04 16:16:28 发布

阅读量307

点赞数

分类专栏：入门-基础文章标签： css css3

本文链接：https://blog.csdn.net/qq_38188709/article/details/104083395

版权

入门-基础专栏收录该内容

18 篇文章 1 订阅

订阅专栏

本姑凉已掌握的css基础整理

CSS

层叠样式表，简称为样式表，全称是Cascading Style Sheets

1. CSS样式表应用到HTML的3种方式

内部样式表
用<style type="text/css"></style>插入到HTML文件头部

注意：内部样式表必须定义在<head></head>之间，页面所有样式都可以写在<style></style>之间
外部样式表
需要创建一个CSS文件，然后通过link链接到HTML文件头部

*link:
	<link rel='stylesheet' href='样式表路径及全称' type='text/css' />

注意：
rel=‘stylesheet’ 指这个 link 和其href 之间的关联样式为样式表文件
type=‘text/css’ 指文件类型是样式表文件

@import:
	<style type='text/css'>         
     	@import  url('样式表路径及全称');    
	</style>

link和import引入的区别

老祖宗的差别，link属于xhtml标签，@import完全是css提供的一种方式，只能加载css，link标签除了能加载css还可以做很多其他的事情，比如定义RSS、定义rel连接属性等
加载顺序的差别，当一个页面被加载的时候，link引用的css会同时被加载，而@import引用的css会等到页面被全部下载完再被加载，所以有时候@import加载css的页面时开始会没有样式
兼容性的差别，@import是css2.1提出来的，所以老浏览器不支持，@import只在IE5以上的才能识别，而link没有此问题
使用dom控制样式时的差别：当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

内联样式表（行间样式、行内样式、嵌入式样式）

	语法：
		<标签 style="属性:属性值; 属性:属性值"></标签> 
	例如：
		<div style="width:599px; height:208px; background:red"></div>

样式表的作用域

行内样式的作用域是当前标签，
内部样式的作用域是当前文件，
外部样式表的作用域是所有关联的所有文件。
内嵌样式表的优先级别最高。内部样式表和外部样式表的优先级，跟他们的先后顺序有关，谁在后面谁优先。

2. CSS样式语法

CSS样式由两部分组成，分别是选择符和声明。
声明由属性和属性值组成，所以css语法：选择符{属性：属性值;}

-1- 选择符

选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。大概有十种左右

1. 类型选择符 
语法：标签名称	{属性：属性值;}
用法：CSS:p{color:red}
说明：使用类型选择符统一页面中某个元素的显示样式时，使用类型选择符

2. Id选择符
语法：#id名		{属性：属性值；}
用法： CSS: #top{font-size:12px;color:blue}
      HTML: <div id='top'></div> 
说明：Id选择符可对元素进行一个ID名称的指派。id的基本作用是对每一个页面中的唯一出现的元素进行样式定义。

3. 类（class）选择符
语法：．类(class)名	{属性：属性值；}
用法：CSS: .txt{font-size:12px;color:blue;background:red}
     HTML:<div class='txt'>111</div>        
                   <div> 222</div>         
                   <p class='txt'>333</p>
4. 通配符
语法：*		{属性：属性值；}
说明：通配选择符的写法是“*”，其含义就是所有元素。
用法：常用来重置样式。
         *{margin:0; padding:0}	//取消外边界和内填充，css文件先写这个
         Margin:0  auto; 	//使元素居中（谁居中给谁加）


5. 群组选择符
语法：选择符1，选择符2，选择符3…	{属性：属性值；}
说明：对一组元素进行相同的样式指定，
用法：CSS:h1,h2,h3,p{font-size:12px;color:blue;}

6. 包含选择符
语法：父元素 子元素 ……	{属性：属性值；｝
说明：包含选择符指选择符组合中前一标签包含后一个标签，之间用空格空开。
	 利用包含选择符可以减少使用class及id的设置,并且直接对所需要设置的元素进行了样式设置。
	 
7. 子选择符
语法：父元素>子元素		{属性：属性值；｝
说明：不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
用法：
CSS:	 <style type="text/css">
               div span{color:#C3F;}
               div>span{color:green;}
         </style>
HTML：	   <div>
                <p>zhe
                <span>li</span></p>
               <span>shi</span>
           </div>

8. 伪类选择器(伪类选择符)
语法：      a:link {属性：属性值;}超链接的初始状态; 
            a:visited {属性：属性值;}超链接被访问后的状态;
            a:hover {属性：属性值;}鼠标划过超链接时的状态; 
            a:active {属性：属性值;}即鼠标按下时超链接的状态;
说明：
1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，
	正常顺序为：`lvha`：a:link,a:visited,a:hover,a:active,	错误的顺序有时会使超链接的样式有些部分失效；
2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
 常用：表示超链接的三种状态都相同，只有鼠标划过变颜色。
           a{color:red;}     
           a:hover{color:green;}    

9. 注释
html   <!--注释内容-->
 css      /*注释内容*/

10.伪元素选择符 见文末

-2- CSS属性和作用

CSS组成：选择符+声明(属性+属性值)，选择符上面已经介绍过了，下面看看属性吧
属性：
属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性属性值：
属性值包括法定属性值（颜色英语）及常见的数值加单位，如25px，或颜色值等。
声明语句：
声明语句必须要包含在{ }号之中；
如果一个属性有多个值，则每个属性值之间用空格分隔开。
当有多个属性时，用“；”进行区分；
在书写属性时属性之间使用空格、换行等，并不影响属性的显示；

2.1 字体属性

1. font-size：
		设置字体大小： 网页的字体大小默认为16px，即 1em 
		默认情况：1em=16px,0.75em=12px;
		单位还可以是pt，9pt=12px; 常用单位是px
			例：body{font-size:12px;}	
		//使用绝对大小关键字
// xx-small=9px  x-small=10px  small=13px  medium=16px   large=18px  x-large=24px  xx-large=32px

2. font-style：设置字体正斜风格：设置字体正常/斜体语法： font-style：normal/italic/oblique  

3. font-weight：设置字体加粗：设置字体正常/加粗语法： font-weight：normal/100-900/bold/bolder（不加单位）

4. font-family：设置字体样式名称：例如：  .nav{font-family: "幼圆" , "微软雅黑" , "黑体" ;}     
										1、当你的字体为汉字时，需加双引号。    
										2、当你的字体为一个单词组成时，不需要加双引号。     
										3、当你的字体为多个英文单词组成时，需要加双引号。     
										4、标点符号必须为英文状态。
										
5、当一段代码已经使用过双(单)引号之后，里面只能使用单(双)引号

6. text-align：设置水平对齐：    语法：text-align：left/right/center/justify
7. line-height：设置行高、设定行距。值为数值或倍数。文字一定会出现行高的（值）最中间 
8. 单行文本水平垂直居中：text-align:center;line-height:(容器(父元素)高度）行高=容器高度  
9. vertical-align：设置垂直对齐： vertical-align:top/bottom/middle; 只针对内联块元素有用
10. text-decoration：设置文本划线。值有：none/underline/overline/line-through 
	//	none:没有修饰 underline:添加下划线 overline:添加上划线 line-through:添加删除线
11. text-indent：设置文本缩进。值为数值，常用单位有px
	//	1）text-indent可以取负值；2）text-indent属性只对第一行起作用。
12. letter-spacing：设置文本字间距，控制英文字母或汉字的字距。
13. word-spacing：控制英文单词词距
14. text-transform  大小写切换 none  默认。定义带有小写字母和大写字母的标准的文本。
15. capitalize   文本中的每个单词以大写字母开头 
16. uppercase  定义仅有大写字母  lowercase  定义仅有小写字母 
17. font-variant：normal/small-caps/inherit   小型大写字母 规定从父元素继承 font-variant 属性的值

文字属性的缩写
用法：font：weight style size/ line-height family;  //粗斜大高体

注意：	  文字缩写属性必须要在font-size和font-family同时存在时才会生效 
          其中font-weight 和font-style没有会使用缺省值。
          font-size和line-height必须以"/"(反斜杠)连接。 
          文字属性的简写必须按照此顺序。粗斜大高体

文本颜色
用法：`color : 颜色值` ; （没有font）
用十六进制表示颜色值：
	颜色值的缩写：
  		当表示三原色的三组数字同时相同时，可以缩写为三位; 
  		当用十六进制表示颜色值时，需要在颜色值前加“#”:#ff0000/#f00

2.2 布局属性

宽度属性（width）: 值为数值，单位为px/%，宽度不写默认为100%； 
高度属性（height）: 值为数值，单位为px/%，高度不写就没有高度，其高度是内容撑出来的高度

》如果继承的是body和html, 需要先写上：html,body{height:100%;}

2.3 列表属性

定义列表符号样式：
	1)list-style-type:disc(实心圆)/circle（空心圆）/square(实心方块 )none(去掉列表符号)；
	2)使用图片作为列表符号：list-style:url('../img/123.jpg');
	3)定义列表符号位置：list-style-position:outside/inside; 

》简写： list-style:none;

2.4 背景属性

为元素设定背景色：background-color
为元素设定背景图：background-image
写法：.nav{background-image:url(背景图片的地址及全称)}
背景图片的显示原则                
	1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;                
	2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；                        
	3）容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图。 

1.背景重复属性 background-repeat 和背景图搭配使用，设置背景图是否平铺
值有：repeat/repeat-x/repeat-y/no-repeat

2.背景定位属性 ：background-position 和背景图搭配使用，设定背景图片显示的位置 
通过方向或者数值来设置： Left  top ; 0px   0px  
》注意事项： 第一个值是水平位置，第二个值是垂直位置，默认值是左上角 0 0。（50%   50%中心位置） 
		    如果仅规定了一个值，另一个值将是50%。 如果您仅规定了一个关键词，那么第二个值将是"center"。
		    
3.背景附着属性 ：background-attachment 和背景图搭配使用，设定图片是否跟随内容滚动
值：scroll/fixed  

4.背景简写属性 background:  背景属性的综合属性
语法：background:背景颜色  背景图像   背景位置  背景重复 背景附着  (空格分开)
例如：background:#f00 url(img/tu.jpg) right no-repeat fixed;

2.5 浮动属性

浮动的框可以向左或向右移动，语法：float:none/left/right 全部浮动会在一行只有一个浮动就会重叠

清除浮动

规定元素的哪一侧不允许其他浮动元素，语法： clear: left/right/both/none
none：默认值，允许浮动元素出现在两侧
left：在左侧不允许浮动元素
right：在右侧不允许浮动元素。(clear和float浮动方向保持一致才生效)
both：在左右两侧均不允许浮动元素。

高度塌陷

父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（浮动元素父元素高度自适应）
hack1：给父元素添加声明overflow:hidden;(原因 bfc)
hack2：在浮动元素下方添加空div,并给该元素添加声明：clear:both;height:0;overflow:hidden; 
hack3：万能清除浮动法 选择符 :after{content:“.”;display:block; clear:both; height:0; overflow:hidden; visibility:hidden ;}

2.6 盒模型

构成

margin：类似快递和快递之间的距离
border：类似快递盒
padding：类似填充物
content：类似买的东西

填充属性

内间距\内补丁、内边距

css盒模型属性 — 边距属性 `margin`

设定页面中一个元素所占空间的边缘(边框)到相邻元素边框之间的距离。

margin属性值的4种方式：

四个值：上、右、下、左
三个值：上、左右、下
二个值：上下、左右
一个值：四个方向
padding加给父元素，margin加给子元素

css盒模型属性 — 内边距属性`padding`

1.设定元素内容到元素的边缘(边框) 之间的距离
2.设定子元素与父元素的位置关系
说明：
padding是添加在原有的大小之上的，若想保持元素大小不变，需从元素的原有大小上减去后添加的。

padding属性值的4种方式：

一个值：上下左右
两个值：上下、左右
三个值：上、左右、下
四个值：上、右、下、左

css盒模型属性 — 边框属性`border`

边框属性 border
语法：border : 边框宽度边框风格边框颜色
例如：border : 5px solid #f00; border : solid 1px yellow;
边框风格 border-style : 风格不写，整个边框不显示。别的不写，会默认缺省值。
值有 : none（无）/solid(实线)/dotted(点划线)/dashed（虚线）/ double双线
边框宽度 border-width : 设定边框宽度，数值，单位为px 边框颜色 border-color : 设定边框色
边框类型：groove3D凹槽边框、ridge3D垄状边框、inset outset3D边框（都取决于边框颜色）

给父元素下第一个子元素添加margin-top之后，浏览器会默认给父元素，把整个父元素都带下来

//margin-top的三种解决办法
1.给父元素添加 overflow:hidden
2.给父元素添加盒模型相关属性，比如 border:solid 1px
3.给其中一个元素浮动 float:left

可写负值的属性

text-indent
background-position
margin
z-index

盒模型补充

margin总是透明的，padding也是透明的，但padding受背景影响，能够显示背景色或背景图。
margin可以定义负值，border和padding不支持负值。
如果需要，每一条可见边框都可以定义不同的宽度，但前提是要定义border-style属性为可见样式。
每一个盒子所占页面区域的宽度和高度等于margin外沿的宽度和高度。
浏览器窗口是所有元素的根元素，也就是说html是最大的盒子，也有浏览器把body看作是最大的盒子。

盒模型尺寸计算

	.box{
		width:200px;
		height:200px;
		padding:20px;
		border:solid 1px;
		margin:20px;
	}
	/**占空间
	*宽=width+左右padding+左右border+左右margin
	*高=height+上下padding+上下border+上下margin
	* 200+20*2+1*2+20*2=282 真正计算的时候是没有margin的
	*/

2.7 CSS权重

4位的数字来表示权重,权重的表达方式：如0,0,0,0

选择符	权重	选择符	权重
类型选择符	0001	类(CLASS)选择符	0010
ID选择符	0100	子选择符（E>F）	0000
属性选择符	0010	伪类选择符	0010
伪元素选择符	0001	包含选择符	包含的选择符权重值之和
内联样式	1000	继承的样式	0000

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

!important 作用是提高指定CSS样式规则的应用优先权

层叠与权重的关系：
层叠是css的一个特性，如果两个相同的属性作用于同一标签，它们会发生层叠；
如果多个复合选择器，同时作用于我们的同一标签，优先级就不好计算了，就要计算权重，通过比较权重，来先出优先级最高的选择器。

2.8 文本溢出

溢出属性（容器的） overflow : visible/hidden(隐藏)/scroll/auto(自动)/inherit

visible:默认值，内容不会被修剪，会呈现在元素框之外； 
hidden：内容会被修剪，并且其余内容是不可见的； 
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容; 
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容; 
Inherit：规定应该从父元素继承;
overflow 属性值(ie浏览器不支持此属性值).

空余空间 white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit

该属性用来设置如何处理元素内的空白； 
normal：默认值，空白会被浏览器忽略， 
pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签； 
pre-wrap：保留空白符序列和换行符，但是正常的进行换行(碰到边缘)； 
pre-line:合并空隔符，但是保留换行符；  
nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止； 
inherit：规定应该从父元素继承White-space属性的值；(ie浏览器不支持此属性值)

文本溢出 text-overflow : clip/ellipsis

clip：不显示省略号（...），而是简单的裁切; 
ellipsis：当对象内文本溢出时，显示省略标记;

 text-overflow属性仅是...，当文本溢出时是否显示省略标记，并不具备其它的样式属性定义。

要实现溢出时显示省略号的效果还需先定义: `display:block` 再规定：

1.容器宽度： width:value
2.强制文本在一行内显示：white-space:nowrap
3.溢出内容为隐藏： overflow:hidden
4.溢出文本显示省略号：text-overflow：ellipsis

2.9 元素类型

根据css显示分类,HTML元素被分为两种类型 : 块状元素，内联元素。

块元素 (block element)— block

1.默认独占一行     
2.没有宽度时，默认撑满一排（块状元素默认宽度为100%）     
3.可以定义自己的宽度和高度 

4.常见的块状元素有：div ul li h1-h6 p ol dl form table

内联/行内元素 (inline element)— inline

1.多个内联元素可以同一行显示     
2.高和宽由内容撑开     
3.写不上宽高     
4.不支持上下的margin     不支持margin  可以用行高 

5.常见的内联元素有：a br strong em span  图片和表单控件

内联/行内块元素

1.内联块元素、行内块元素img, input等。
2.多个元素可以在同一行显示，可以设置width/height属性的这类元素
3.只有这一个元素类型支持vertical-align属性

4.内联块元素他们区别一般inline元素： 
常见的img、input、select、textarea(多行文本域)、button等有内在尺寸。

可变元素、替换元素、可替换元素

1.需要根据上下文关系确定该元素是块元素或者内联元素
2.直接写上是没有任何作用的，所显示的内容需要浏览器根据元素的属性去判断：(比如src type）

3.常见的元素：img input textarea audio video

元素类型的转换`display`

盒子模型可通过display属性来改变默认的显示类型

display：block/inline/inline-block/none/list-item/table-header-group/table-footer-group…

作用：该属性设置或检索对象元素应该生成的盒模型的类型。

各属性值的作用
1)Block 块状显示：使内联元素具备"块属性标签"的特性 
2)inline 内联显示：使行块属性标签具备"内联元素"的特性 
3)Inline-block 行内块元素显示：元素的内容"以块状显示，并且与行内的其他元素显示在同一行", 支持宽高,
  没有宽度的时候由内容撑开宽度, 只有这一个元素类型"支持vertical-align属性（img,input）"
4)none: 此元素不会被显示 
5)list-item: 将元素转换成列表, li的默认display类型
6)当"元素设置了float"属性后，就相当于给该元素加了"display:block"属性,且宽度为内容撑出来的宽度。

2.10 透明属性`opacity:value`

(value的取值范围0-1,0.1,0.2,0.3-----0.9)，缓慢出现缓慢消失必须用这个

2.11 Visibility属性

visibility:hidden/visible  隐藏/可见

visibility:hidden 和 display:none 以及 opacity的****区别

元素消失，不占位置   display:none
元素消失，占位置	visibility:hidden	opacity:0
元素显示	display:block	visibility:visible	opacity:1

-3- Banner扩展

收集了3种banner扩展方法

NO.1

HTML:
<div>
	<img src="../img/banner.jpg" alt="banner" title="banner" />
</div>
<div class="partner"></div>

CSS:
.banner{
	height:457px;
	background:pink;
}
.banner img{
	margin-left:-147px;
}

NO2.

HTML:
<div class="wrapbanner">
<div class="banner">
	<img src="../img/banner.jpg" alt="banner" title="banner" />
</div>
</div>

CSS:
.wrapbanner{
	height:457px;
	background:pink;
}

NO3.

HTML:
<div class="banner" style="widt:100%;height:457px" >
	<img src="../img/banner.jpg" alt="banner" title="banner" />
</div>

-4- 水平垂直居中

4.1 图片水平垂直居中

1. 水平居中 text-align:center
2. 垂直居中
	（1）写一个空标签span当做参照物
	（2）span的宽度为0,高度100%,转成inline-block类型
	（3）span写上vertical-align：middle以中线对齐
	（4）img图片写上vertical-align：middle 以中线对齐

4.2 元素水平垂直居中

1.水平居中 margin:0 auto
2.水平垂直居中

// 四种方法，前两种不用知道宽高，后两种需要知道宽高

<style type="text/css">
	1.弹性盒
	html,body{height:100%}
	body{display:flex;justify-content:center;align-item:center}
	2.position
	.box{width:200px;height:200px;background:pink;
position:absolute; top:0; left:0; right:0; bottom:0; margin:auto	
	}
	3.position
	.box{width:200px;height:200px;background:pink;
position:absolute; top:50%; left:50%; margin-top:-100px;margin-left:-100px	
	}
	4.2D
	.box{width:200px;height:200px;background:pink;
position:absolute; top:50%; left:50%; transform:translate(-100px,-100px)
	}
</style>

-5- 定位属性`position`

语法：position：static/relative/absolute/fixed／sticky/unset/initial/inherit

检索对象的定位方式
取值： 
	1、static：默认值，无特殊定位； 
	2、relative：相对定位  `right:`; `top:`; `left:`; `bottom:`;
		// 1.占位置  2.根据原来的位置进行移动 相对自己原来的位置偏移 
	3、absolute：绝对定位，将对象从文档流中拖离出来，使用`left/right/top/bottom`等属性相对其最接近的一个
并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据html(根元素)，
	   // 1.脱离文档流 2.不占位置 3.根据父元素（参考物）进行位置移动而其层叠通过z-index属性定义；
	4、fixed：固定定位
	5、sticky(粘性定位)
		(1)在sticky元素到达 距离相对定位的元素顶部50px的位置时固定，不再向上移动。
		(2)让sticky属性生效的条件有以下两点：1.一个是元素自身在文档流中的位置  2.另一个是该元素的父容器的边缘 
	6、Inherit： 继承
		initial 关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。（IE 不支持该关键字）
	7、unset：unset 关键字我们可以简单理解为不设置。
	   // 其实，它是关键字 initial 和 inherit 的组合。  
		(1)如果该属性是默认继承属性，该值等同于 inherit
		(2)如果该属性是非继承属性，该值等同于 initial

这里罗列一下默认为inherited:Yes的属性

包含块的概念及作用

`包含块是`绝对定位的`基础`，包含块就是为绝对定位元素提供坐标，偏移和显示范围的`参照物`；     
	1、父元素上面`没有`定位属性，根据html进行位置移动 
	2、父元素上`有`定位属性，找最近的一个含有定位属性的父元素进行位置的移动      、
	 
`定义`元素为`包含块`： `给绝对定位元素的父元素`添加声明`position：relative`； 

如果我们的父元素设置了`position:absolute`;那么子元素也会相对父元素来定义自己的位置。

定位元素 — 层叠属性

z-index : auto | number检索或设置对象的层叠顺序。 
		auto: 默认值，遵从其父对象 
		number: 无单位的整数值，可为负数

此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象。

-6- 命名锚点链接

定义：在同一页面内的不同位置进行跳转。
命名锚点链接的应用： 
1)给元素定义命名锚记名 语法：<标签   id="命名锚记名"> </标签>
2)命名锚记连接 语法：<a href="#命名锚记名称"></a>

扩展
flash<embed src="" type="video/quicktime" />

Marquee跑马灯
<marquee direction="up" behavior="slide" scrollamount="5"  scrolldelay="90" loop="2">我想上滚动</marquee> direction:滚动方向4个值 up down left right  默认从右向左 behavior:scroll循环滚动/slide只滚动一次/alternate来回滚动 默认循环滚动 scrollamount:值越大，滚动速度越快 一般5-10比较适宜消息观看 scrolldelay:值越大，滚动速度越慢，通常不设置 loop:默认值-1或infinite 表示无限循环滚动 loop="数值" 表示滚动相应的次数 https://www.jianshu.com/p/6dcec8a9ea60

-7- 补充 — 伪对象/伪元素选择符

1）: after 与content属性一起使用，定义在对象后的内容

	div:after{content:url(logo.jpg);}
	div:after{content:"文本内容";}

2）: before 与content属性一起使用，定义在对象前的内容。

如	div:before{content:"在其前放内容";}

3）: first-letter 定义对象内第一个字符的样式。
4）: first-line 定义对象内第一行的样式。

说明： *(该伪元素只能用于块级元素。) *ie6以下版本浏览器不支持伪对象选择符。