CSS学习笔记

1.什么是CSS

  • CSS全称:Cascading Style Sheets层叠样式表,定义如何显示HTML元素
  • 多个样式可以层层覆盖叠加,如果不同的css样式对通一html标签进行修饰,样式有冲突的应用优先级高的,不冲突的共同作用

2.CSS书写规范

CSS规则由两个主要部分构成:选择器,以及一条哦或多条声明

  • 选择器通常是您需要改变样式的HTML元素
  • 每条声明由一个属性和一个值组成

在这里插入图片描述

3.CSS导入方式

3.1内嵌方式(内联方式)

把CSS样式嵌入到html标签当中,类似属性的用法

<div style="color: blue;font-size: 30px;">内嵌方式</div>

3.2内部方式

在head标签中使用style标签引入css

		<!--	
			内部方式
        	引入CSS,告诉浏览器使用CSS解析器去解析
        -->
		<style type="text/css">
			div{color: green;font-size: 20px;}
		</style>
		

3.3外部方式

在head标签中写引入语句
rel:代表当前页面与href所制定文档的关系
type:文件类型,告诉浏览器使用cass解析器解析
href:css文件地址

<link type="text/css" rel="stylesheet" href="cssStyle.css"/>

3.4@import方式

在head标签中写引入语句
url:css文件地址

	<style type="text/css">
			@import url("cssStyle.css");
	</style>

link和@import方式的区别:

  • link所有浏览器都支持,@import某些低版本的IE不支持
  • @import是等待htm加载完成才加载
  • @import不支持js动态修改

4.CSS选择器

4.1基本选择器

  1. 元素选择器:html标签{属性:值}
  2. id选择器:#id值{属性:值}
  3. class选择器:.class名{属性:值}
<!--示例代码-->
<style type="text/css">
			/*元素选择器*/ 
			p{color: #f00;}
			div{color: green;font-size: 20px;}
			
			/*id选择器*/
			#s1{font-size: 20px;}
			#s2{font-size: 30px;}
			
			/*class选择器*/
			.s1{color: #00f;}
			.s2{color: #0f0;}
</style>

备注:以上基本选择器的优先级从高到低:id选择器,class选择器,元素选择器

4.2属性选择器

  • 根据元素的属性及属性值来选择元素
  • 格式为:
  • html标签[属性= “属性值”]{css属性:css属性值;}
  • html标签[属性]{css属性:css属性值;}
	div[class="d1"]{font-size: 30px;}
	div[class]{font-size: 30px;}

4.3伪元素选择器

  • 主要是针对a标签
  • 语法:
    • 禁止状态 a:link{css属性}
    • 悬浮状态 a:hover{css属性}
    • 触发状态 a:active{css属性}
    • 完成状态 a:visited{css属性}
    • hover可以用在其他标签
	<style type="text/css">
			<!--禁止状态-->
			a:link{color: #oof;}
			<!--悬浮状态-->
			a:hover{font-size: 20px;}
			<!--触发状态-->
			a:active{color: #ccc;}
			<!--完成状态-->
			a:visited{font-size: 12px; color: #ff0;}
			<!--hover用在其他标签-->
			div:hover{width:500}
	</style>

4.4.层级选择器

父级选择器 子级选择器…具体示例如下:

head中

<style type="text/css">
#d1 div{color: blue;}   表示指定id为d1的子级div会有影响
</style>

body中

<div id="d1">
	<div>包含层级关系div</div>
</div>
<div>独立div</div>

5.CSS属性

5.1文字属性

属性名取值描述
font-size数值设置字体大小
font-famity默认、宋体、楷体等设置字体样式
font-stylenormal正常;italic斜体设置斜体样式
font-weight100~900数值;bold;bolder粗体样式

5.2文本属性

属性名取值描述
color十六进制;表示颜色的英文单词设置文本颜色
text-indent5px缩进5像素;20%缩进父容器宽度的百分之二十缩进元素中文本的首行
text-decorationnone;underline;overline;blink文本的装饰线
text-alignleft;right;center文本水平对齐方式
word-spacingnormal;固定值单词之间的间隔
line-heightnormal;固定值设置文本的行高
text-shadow四个取值依次是:水平偏移;垂直偏移;模糊值;阴影颜色设置阴影及模糊效果

5.3背景属性

属性名取值描述
background-color16进制;用于表示颜色的英语单词设置背景色
background-imageurl(“图片路径”)设置背景图片
background-repeatrepeat-y;repeat-x;repeat;no-repeat;line-through设置背景图的平铺方向
background-positiontop;bottom;left;right;center改变图像在背景中的位置

5.4列表属性

属性名取值描述
list-style-typedisc等改变列表的标识类型
list-style-imageurl(“图片地址”)用图像表示标识
list-style-positioninside;outside标识出现在列表项内容之外还是内部

5.5尺寸属性

  • width:设置元素宽度
  • height:摄制组元素的高度

5.6显示属性

显示属性display,以下是常用取值:

  • none:不显示
  • block:块级显示
  • inline:行级显示

5.7轮廓属性

绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。常用属性:

属性名取值描述
outline-stylesolod(实线)/dotted(虚线)/dashed(虚线)等设置轮廓的样式
outline-color16进制;用于表示颜色的英文设置轮廓的颜色
outline-width数值设置轮廓的宽度

5.8浮动属性float

clear属性:规定元素的哪一侧不允许其他浮动元素。它的取值如下:

取值描述
left在左侧不允许浮动元素
right找右侧不允许浮动元素
both在左右两侧均不允许浮动元素
none默认值,允许浮动元素出现在两侧
inherit规定应该从父元素继承clear属性的值

5.9定位属性

  1. 相对定位:元素框偏移某个距离,元素仍保持其未定位前的形状,它原本所占的空间仍保留
  2. 绝对定位:元素框从文档流完全删除,并相对于其包含块进行定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框
  3. 固定定位:元素框的表现类似于剑position设置为absolute,不过其包含块是视窗本身

6.CSS盒子模型

在这里插入图片描述

6.1边框相关属性

属性名取值描述
border-stylesolid;double;dashed;dotted等设置边框的样式
border-color16进制;用于表示颜色的英文设置边框的颜色
border-width数值设置边框的粗

6.2外边距相关属性

margin:外间距,边框和边框外层的元素的距离

属性名取值描述
margintop;right;botton;left四个方向的距离
margin-top数值上间距
margin-bottom数值下间距
margin-left数值左间距
margin-fight数值右间距

6.2外边距相关属性

padding:内间距,元素内容和边框之间的距离

属性名取值描述
padding-left数值左间距
padding-right数值右间距
padding-top数值上间距
padding-bottom数值下间距
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页