Rumah >hujung hadapan web >tutorial css >最简洁的CSS学习笔记
css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
name:名称,可以重复,可以一样;
class:类名,可以重复,也可以拥有多个,给CSS用的;如
;id:唯一标示,不能重复,一般多用在JavaScript中;命名规则与其他语言的标示命名规则一样;
title:标题,可以在标签中添加;如;
后代关系:父子关系(包含关系);
兄弟关系:同父关系;
CSS注释:/注释内容写在这里,给程序员看,页面上不显示/;
CSS语法规则:所有符号都以英文输入法状态下输入,要小写,大括号里写属性,每条属性语句都以分号结束,属性值要带像素单位(px);格式:属性:属性值;
行内引入:在标签中加样式的引入方式;格式:<标签 style="background:red; font-size:20px;">内容标签>;注意:代码可维护性极差,CSS代码与html结构没有实现分离;影响的范围只在当前标签;
内嵌引入:在网页头部中加;注意:代码可维护性比较差,没有实现CSS代码与HTML结构分离,影响范围只在当前页面;
外联引入:在网页外创建一个xx.css文件,网页头部中利用;注意:代码可维护性高,CSS代码与HTML结构完全分离,影响范围整个网站所有引入CSS文件网页中;
结构格式:选择器{属性:属性值;属性:属性值;...};例:p{background:red;color:gray;size:20px;};
选择器:选择页面元素的工具;
大括号:大括号里面写样式内容;
基础选择器:
通用选择器:用来初始化网页默认样式的,样式表开头就写;格式:*{padding:0;margin:0;};
标签选择器:给指定标签加样式;格式:p{color:green;};
类选择器:选择制定类选择器样式;格式:.class名{background:pink;};注意:class名在标签中定义,如class="one";如果几个块内容样式一样,那么给他们一样的样式就可以;
id选择器:唯一标示,不能重复出现;格式:#id名{backgound-image:url(1.jpg);}注意:id名在标签中定义id="one";id不能随表加,几个块内容样式一样时几个块的id名都得不一样;;
id和class的区别:注意上一点——ID必须能够唯一的确定DOM节点。如果你全篇都使用ID选择器,那么即使两个DOM节点样式完全相同,那么你也必须把节点样式写两遍, 如果后期要进行维护,那么你必须对两处的代码都进行维护!!!极大的增加了维护的成本;
伪类选择器:顺序LoVe HAte原则,可以跳过去,但顺序不能换;分别是链接状态(link),访问过的状态(visited),活动状态(hover)和点击状态(active);
描点类:a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} 获取焦点时的样式a:focus{};注意:属性中可以加文本属性,背景颜色和图片;a{}与a:link{}实现的效果是一样的;
列表类:li:link{color:yellow;};li:visited{color:blue;} li:hover{color:red;} li:active{color:pin;};注意:属性中可以加文本系列属性,背景颜色和图片等;
复合选择器:
分组选择器(并集选择器,多元选择器):用来给多个元素加同一个样式;例:.one,#one,a,span{color:red;font-size:14px;}意思是类one,#one,a标签,span标签有共同属性;
后代选择器:给子类元素加属性;例:.one a{text-decoration:none;}意思是类one的后代a标签修饰的内容无下划线;
子元素选择器(指定式选择器):给指定的子元素加属性;例:#one>p{color:red;};意思是给id选择器one的儿子p标签休息的内容加属性;
相邻元素选择器:
1.两个紧挨着的兄弟选择器加属性,不给自己加属性,只给后面的兄弟加属性;.one+p{background:red;};
2.one~p{background:green}意思是给one选择器后面的所有p标签元素加属性,前提是他们拥有一个父类;
属性选择器:
1.给带有属性的元素的加属性;img[id]{background:red;}给带id的元素加属性;
给带有指定属性值的元素加属性:img[src="b.jpg"]{background:red;}给带b.jpg的元素加属性;
3.给带有指定字符开头的的元素加属性:img[src^="b"]{background:red;}给以b开头的所有元素加属性;
4.选择器带有以指定属性值为结尾的元素:img[src$="b"]{background:red;}给以b结尾的所有元素加属性;
5.选择器带有包含指定属性值的元素:img[src*="b"]{background:red;}给含b的所有元素加属性;
块元素:用来排版,结构 典型的有:p,p,li,h1,dt;
元素自己独占一行显示(与宽度无关);
可以设置宽度和高度;
当嵌套一个块级元素,子元素如果不设置宽度,那么该子元素的宽度为父元素的宽度;
行内元素: 用来加样式的;span,a,font,strong;注意:行内元素不要给上下的margin和padding,上下会被忽略,左右起作用(一般不用);
元素在一行上显示;
不能直接设置宽度和高度;
行内块元素:image,input;
元素在一行上显示;
可以设置宽度和高度;
转换关系:行内包含行内;块元素包含块元素,块元素可以包含行内元素;
Display: inline 将元素转化为行内元素
Display:inline-block 将元素转化行内块元素
Display: block 将元素转化为块元素
字体有关属性:
font-size:字体大小,多少像素,px;
font-weight:字体粗细,bold(700-900),normal,可以写100-900;
font-style:字体倾斜,italic,normal;
font-family:字体,微软雅黑,黑体;
属性连写:font: font-style font-weight font-size/line-height font-family;注意: font属性联写必须有 font-size 和font-family(其他属性可以不写);font-size 和font-family的顺序不能换;
文本:
color:颜色;
text-indent:缩进【单位是em】;
text-decoration:文本线【underline下划线,overline上划线,line-through删除线,none取消线】;
word-spacing:单词之间距离;
letter-spacing:字母键距离;
text-align:水平对齐方式【默认left,center,right】;
line-height:行高,文字所在行的高度【行高和元素高度相等时文字垂直居中】;
尺寸:是块元素的尺寸,行内元素不可以设置宽高,想设定得转换;
width:宽度;
height:高度;
列表ul,li的属性:list-style-type在ul中加了可以的li中不用加;
list-style-type:none;去掉符号,square方块,circle圆,disc实体圆,加图片了后可以不写也可以list-style-type:none;
list-style-image:url(1.jpg)图片
border:1px solid red;给ul整体设置边框
list-style-position:outside;样式图片定位:inside,outside
背景:
背景颜色background-color;
背景图片background-image注意:设置背景图片的时候一定要设置宽度和高度;
背景平铺background-repeat:repeat (默认值)|no-repeat (不平铺)|repeat-x | (横向平铺)repeat-y (纵向平铺)
背景位置background-position:设置具体值: left| right| top| bottom| cneter;设置具体值的时候不区分先后顺序;设置具体数字的时候,第一个值代表水平方向,第二个值代表垂直方向,设置前背景图片设置格式改成background-image;
设置背景是否固定background-attachment: Scroll(默认值)滚动;fixed (图片固定);
属性联写:没有数量限制和先后顺序限制:background:url("") red no-peat 30px 40px;
行高line-height:
盒子模型:用来进行网页布局,必须设置宽度
盒子边框属性:
组成部分:
边框宽高:border-width:1px;
边框颜色:border-color:red;
边框样式:border-style:solid实线/dotted点线/dashed虚线/none无;
属性联写:border:1px solid red; 注意:属性联写的时候没有先后顺序限制,边框颜色可以不写,边框宽度可以不写
分开写法:
border边框:
padding内边距:设置内容距离盒子边框之间的距离
margin外边距: 设置盒子与盒子之间的距离
p{ width:300px; height:200px; border-top:1px solid red; border-left:1px solid red; border-right:1px solid red; border-bottom:1px solid red; }
6. 单独设置属性法:
border-top-color:red; border-top-style:solid; border-top-width:1px;
盒子大小:
盒子大小影响的地方:继承的盒子再父盒子宽度范围内,padding值不会影响该盒子大小
盒子大小计算: 宽度=内容宽度+左右边框+左右内边距
边框可以影响盒子大小
内边距影响盒子大小
以后进行页面盒子布局的实现,如果给盒子设置了内边距,对应的要将内容宽度或者高度减去相应的值
margin外边距: 设置盒子与盒子之间的距离
盒子居中:
属性联写:
标准流下的盒子居中:margin:0px auto;
定位的盒子居中:先走父盒子的一半,再往回走自己宽度的一半
Margin: 10px 上 右 下 左 10px
Margin:10px 20px 上下10px 左右20px
Margin: 10px 20px 30px 上10px 左右20px 下30px
Margin: 10px 20px 30px 40px 上右下左
one{ width: 100px; height:100px; border: solid red 1px; position: absolute; left: 50%; margin-left: -50px; }
注意:
属性联写:
Padding: 10px; 上,右,下,左的距离为10px
Padding: 10px 20px; 上下10px 左右20px
Padding: 10px 20px 30px; 上10px 左右20px 下30px
Padding: 10px 20px 30px 40px; 上, 右 , 下, 左
当两个盒子垂直显示的时候,外边距以设置的最大值为准(外边距合并的第一种情况),当两个盒子横排显示时,外边距叠加
外边距塌陷(有难问题)解决步骤:
padding内边距:设置内容距离盒子边框之间的距离
给父盒子设置边框
给父盒子设置overflow:hidden;
清除边距:
方法1:*{padding:0;margin:0;}
方法2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}
继承性:
可继承性:color,text-align,text-indent,font-size,font-weight,font-family
不可继承:text-decoration,border,display,margin,float,padding
继承性发生的前提是标签之间属于一种嵌套关系
文字颜色可以实现继承;文字大小可以实现继承;字体可以实现继承;与文字有关的属性都可以 实现继承
行高可以实现继承
特殊性:
不能继承父元素中的文字颜色(层叠掉了)
重叠性:层叠性是指样式的覆盖
样式的层叠性与样式的调用顺序没有关系,与样式的定义顺序有关。
层叠性发生的前提: 样式冲突
优先级:
权重:行内引入(1000)>id(100)>class(10)>标签(1)>通用(0)
把权重相加,值越大越有先
权重一样,后面的样式起作用
表单优化写法:
格式化列表图标:list-style: none
表单合并:border-collapse:collapse(设置表格边框合并,适用于表格)
Bfc “格式化上下文”
overflow:
visible:默认值。内容不会被修剪,会呈现在元素框之外
hidden:内容会被修剪,并且其余内容是不可见的;当图片改变位置时带动父元素也改变位置,给父元素加此属性值可使父元素位置不变
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
用法: Float:left| right
特点:要浮动都浮动
设置了浮动的元素不占原来的位置(脱标)
可以让块级元素在一行上显示
浮动可以行内元素转化为行内块元素
模式转换的过程中,能用display就用display
清除浮动:
定义:清除浮动不是删除浮动;清除浮动指的是清除浮动的影响
注意使用时机:当子元素设置了浮动,父元素没有高度的时候,造成页面布局混乱;这种情况下进行清除浮动。
清除浮动方法:
[x]注意:在要清除浮动的元素后面添加一个空块元素(,标签),在添加的空元素中加clear:both | left |right
.clearfix{ clrar:both; } <p class="content"> <p class="left"></p> <p class="right"></p> <p class="clearfix"></p> </p>
[x]给父盒子设置overflow:hidden;**注意:如果父盒子中有定位的元素,一般不推荐使用该种方式清除浮动**
.content{ width:500px; overflow:hidden; }
[x]使用伪元素清除浮动
.clearfix:after{ content:""; display:block; clear:both; height:0; visibility:hidden; } .clearfix { zoom:1; } <p class="content clearfix"> <p class="left"></p> <p class="right"></p> </p>
静态定位:静态定位就是元素标准流的显示方式position:static;就是默认的定位
绝对定位:相对于定位元素的父元素或者祖先元素定位,如果父元素和祖先元素不存在定位,就会找到最初的包含层;不占有以前的位置;position:absolute;
当给一个单独的元素设置绝对定位,以浏览器左上角(body)为基准设置定位的。
当盒子发生嵌套关系的时候,如果父盒子没有设置定位,子盒子设置定位以浏览器左上角为基准设置定位。
当盒子发生嵌套关系的时候,如果父盒子设置定位,子盒子设置定位父盒子左上角为基准设置定位。
给盒子设置了绝对定位,该盒子不占位置(脱标)
给行内元素设置绝对定位后,该元素转化为了行内块元素
注意:元素设置了绝对定位后,通过具体的方位名称可以随便设置元素的位置
相对定位:相对于元素原位置,会占有以前位置;position:relative;
元素设置了相对定位后占原来的位置
设置相对定位以自己的位置为参照设置位置
相对定位不能进行元素的模式转换
子绝父相(子元素设置绝对定位,父元素设置相对定位)
固定定位:相对于整个稳稳当固定不变;固定定位不占位置(脱标);将行内元素转化为行内块元素position:fixed
层级问题:
只有设置到定位才会有层级问题
兄弟元素中存在相对,绝对等定位,谁的HTML文档结构在后面,谁在最外层(层级高)
Z-index:设置层级,值是数字,只要有定位会用到定位设置
浏览器中的坐标系
圆点以右为正方向,圆点以下为正
CSS精灵是一种处理网页背景图像的方式;精灵图也是一种背景图片
精灵图的使用
使用fw一定要用打开的方式打开精灵图
使用精灵图作为背景图片的时候,常与background-position配合使用
测量精灵图中的元素的坐标使用矩形选择器
或者使用快捷键 字母: k
overflow: hidden 将超出部分进行隐藏
display: none 直接将元素隐藏
display:block 将元素显示(与js配合更搭)
visibility:hidden 将元素隐藏
display: none; 将元素隐藏后不占位置
visibility: hidden; 将元素隐藏后占原来的位置
每一种inlne-block元素都有一个默认的vertical-align:baseline
vertical-align:middle 垂直对齐; vertical-align与inline-block更搭配;
网页布局过程中能用标准流就用标准流
标准流不能解决浮动
浮动不能解决定位
使用margin-left/margin-right 取值为auto可以将盒子自动冲到两外一边
p可以包含任何标准流下的标签
p标签不能包含p和标题标签和列表标签
标题便签可以包含其他标签
行内元素最好不要包含其他标签
在浮动之后,元素可以设置宽高
在绝对定位后,元素可以设置宽高
在固定定位后,元素可以设置宽高
CSS3和CSS2:CSS功能强大,代码简洁
伪类选择器:
第一个子元素:first-child
最好一个元素:last-child
第n个子元素:nth-child(n);n给数值
奇数为子元素:nth-child(odd);或者(nth-child(2n+1))
偶数位子元素:nth-child(even);或者(nth-child(2n))
文本阴影:text-shadow:水平,垂直,阴影
盒子阴影:box-shaadow:水平,、垂直,阴影
背景:background
相关推荐:
Atas ialah kandungan terperinci 最简洁的CSS学习笔记 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!