一文掌握css3所有常用属性

写在前面:本文只是记录了初学css3时常用的一些属性和使用方法。

网页应用css样式方法:
1.链接外部css样式表:
2.文档中嵌入css样式:head取中使用

理解css选择器:
基本选择器:
1.标记选择器:用于文档某个特定标记定义格式;为具有嵌套关
2.类选择器:点号开头,第一个字符不能使用数字
3.ID选择器:一个ID只能用一个元素,#开头,第一个字符非数字
4.伪类选择器:用冒号表示,用在选择器之后,表明在某种状态下才能
选中(lvha)
5.伪元素选择器:以双冒号或者单冒号开头,用于选择指定元素
复合选择器:由两个选择器直接构成,结果是选中两者各自作用范围的交集。
第一个必须是标记选择器,第二个必须是类选择器或id选择器
并集选择器:可对多个选择器进行集体声明,多个选择器之间用“,”隔开
通用选择器:*{css代码}
后代选择器:选择某元素的后代元素 例:ul li ol li{front-style:italic};
子代选择器:用于选择指定标记元素的第一代子元素,使用“>“相隔
相邻选择器:选择某个元素后面相邻的元素,使用”+"相隔
复合选择器优先级:行内样式>id选择器>类选择器>标记选择器

理解css层叠样式表:
层叠性是指当有多个选择器都作用于同一元素时,即多个选择器作用范围重叠

css字体和文本属性:
font-family:设置文本字体。其值可以是一组字体名。
font-style:设置文本显示的字形 normal\italic\oblique
font-weight:设置文本的粗细。取值可以是normal\bold\bolder\lighter
font-size: 设置文本字体大小,取值分为四种:绝对大小,相对大小。长度值,百分数
font: 复合属性,可以一次性设置各种属性,各属性值之间以空格分隔。
但是指定次序必须是font-style\font-weight\font-size\font-family 例:p{font;italic 200% serif}
letter-spacing: 设置字符的间距,取值可以是normal\数值,该属性多用于英文文本
text-transform:设置文本大小写,取值可以是none\capitalize\uppercase\lowercase
word-spacing: 设置单词之间的间距,取值可以是normal\数值
text-align:设置文本水平对齐方式,取值可以是left\right\center\justify
line-height: 设置行高(行距)。取值可以是字符的倍数,计量单位数值和百分比
text-indent:设置文本块首行的缩进
text-decoration:设置添加到文本的修饰效果

css背景和列表属性:
background-color:设置元素的背景颜色,默认值是transparent透明色
background-image:设置元素的背景图像,默认值可以是none\url
background-repeat: 设置是否重复图像及如何重复,
取值可以是repeat(默认值)\repeat-x\repeat-y\no-repeat
background-position:设置背景图像的起始位置,通常与background-image一起使用
background-attachment:设置背景图像是否固定或随内容一起滚动,scroll\fixed
background-size: 设置背景图像的尺寸 length| precentage| cover| contain
background-origin:将背景图像定位于某一区域 padding-box|border-box|content-box
padding-box:相对于内边距来定位 border-box:相对于边框盒 content-box:相对内容框

list-style-type:
list-style-position:设置列表标记的位置,取值可以是inside\outside\inherit
list-style-image: 设置图像为列表项目符合,取值可以是none\url

css边框和表格属性:
border:设置元素边框的宽度、样式和颜色,能同时设置4个边框的宽度、样式和颜色
border-left|right|top|bottom:分别设置左、右、上、下边框的宽度、样式和颜色
boder-style:设置边框的样式。
取值可以是:none、dotted(点线)、dashed(划线)、solid(实线)、double(双线)
border-width:设置边框的整体宽度按顺序 上、右、下、左边框的宽度。
取值可以是thin、medium、thick和长度数值
border-color:设置边框的颜色,按上、右、下、左设置各边的颜色
border-radius:为元素添加圆角边框(水平半径 值|% 【垂直半径 值|%】)

盒子模型:
在这里插入图片描述
一个元素盒子的宽度=左外边距+左边距+左内边距+内容宽度+右内边距+右边框+右外边距

	margin:外边距即盒子边框与其他盒子之间的距离。 按上右下左的顺序分别设置各边的外边距属性
	padding:内边距即盒子边框到内容之间的距离。
	marign合并:外边距合并是指两个垂直外边距相遇时将形成一个外边距
	
	**css流布局**
		float属性:设置标记内容浮动到页面边缘。取值为none(默认值)\left\right等
		clear属性:设置是否允许浮动元素在其旁边。取值为none(默认值)\left\right\both等
		left表示跳过左边的浮动元素,right表示跳过右边的浮动元素,both表示跳过所有的浮动元素
		height\width属性:设置标记内容的高度和宽度,取值为auto(默认值)\长度值\百分比
		position属性:设置元素在网页上的定位方式,取值为relative\absolute
		top\left\bottom\right属性:设置元素与其他元素之间的距离
		
		流布局的机制:
			流布局是默认布局方式。
			行内元素在同一行内从左到右并排排列,只有当浏览器容纳不下才会转到下一行
			块级元素占据浏览器一整行位置,块级元素与块级元素之间自动换行,从上到下排列。
			盒子与盒子、盒子与内容之间的距离由margin与padding属性决定
			行内元素和块级元素可以用display来相互转化。 display:block\inline
	**浮动布局:**
		float属性:设置标记内容浮动到页面边缘。取值为none(默认值)\left\right等
		float属性:定义某元素的浮动情况;
		浮动的盒子可以向左或向右移动,直到其外边缘碰到包含盒子或另一个浮动盒子的边框为止
		
		![在这里插入图片描述](https://img-blog.csdnimg.cn/20200524103403984.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjIyNDAx,size_16,color_FFFFFF,t_70)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章