CSS属性笔记速查

导入css的文件的方式:

行内样式:只作用于标签内

内嵌样式(常用):只作用于本文件中

外部样式表(常用):可作用于所有文件,哪个文件需要用,就可以引用   格式:

导入样式表:用来管理@import url(另外一个css样式)

注意:@import是css样式标签,所以必须放到css文件中

选择器的分类:

基本选择器:

标签选择器:选择给哪个标签加样式,自动指向该标签

语法:标签选择器名{属性:属性值}

body{}     p{}     div{}     table{}     td{}     ul{}

类选择器:给一个类html标签加样式

语法:类选择器名{属性:属性值},主要是给css使用

id选择器:给特定的html标签加样式

语法:id 选择器{属性:属性值}

例如:#p{}     #body{}     #table{}

id只能被引用一次,主要是给javascript使用

通用选择器:给所有的标签加样式

语法:*{属性:属性值}   但IE6不支持

复合选择器:

多元素选择器:多个标签共有的属性和属性值,放到一起

语法:选择器,选择器,选择器......{共有的属性:属性值}

后代元素选择器:给html的后代标签加样式(在一个选择器里面的子选择器加样式)类里所有的标签

语法:选择器1    选择器2     选择器3{属性:属性值}

子元素选择器:给某个标签里面的第一层的标签加样式

语法:选择器1<选择器2

伪类: -----锚(内容必须做好链接)

a:link: 未访问的链接样式

a:visited: 访问过的链接样式

a:hover: 鼠标移动上的链接样式

a:active:鼠标点击激活时的链接样式

文本的属性:

font-size:文本的大小 例如 font-size:12px

font-weight: 文本是否加粗 font-weight:bold

font-style:文本是否倾斜 font-style:italic;倾斜   font-style:normal;正常

font-family:文字的字体 font-family:隶书;默认是宋体

text-decoration: 文字是否加划线 text-decoration:underline;下划线 textdecoration:overline 上划线 text-decoration: line-through;删除线

text-indent:文本首行缩进 text-indent:2em

color 文本的颜色 color:red

letter-spacing: 字母和字母之间的间距 letter-spacing:2px;

word-spacing:单词和单词之间的间距 word-spacing:2px;

text-align:文本居中 text-aling:left 居左 text-align:right居右  text-align:center 居中

背景的属性:

background-color:背景颜色

background-image:背景图片

background-attachment:背景附件,背景是否随着上方的内容一起滚动 取值:fixed :背景固定,scroll滚动;

background-repeat:背景图片是否平铺 取值:no-repeat不平铺 repeat-x横向平铺 repeat-y纵向平铺 repeat 横向和纵向都平铺(默认)

background-position:背景图片的展开方式 例如:background-position:水平 垂直;

怎么表示:水平:left  center top    垂直:top center bottom 例如:background-position:10px 20px(代表靠左10px,靠右20px展开)

可以简写:background:背景颜色 背景图片 背景是否平铺 (背景附件通常仅用在body标签用)水平 垂直;

background:url(images/bg.jpg) repeat-y fixed center 20px;

列表的样式:

修改有序列表和无序列表前面的项目符号:

ol,ul {list-style:normal}    修改为无符号

ol,ul{list-style-image:url(images/protitle.jpg)}

表格的样式:

合并表格和单元格的边框线:

table{/*表格*/

width:800px;

border:1px solid blue;/*边框线:1像素 实线 蓝色*/

border-collapse:collapse;/*合并表格的边框线*/

}

td{/*单元格*/

border:1px solid blue;

}

边框(html标签就可以加边框线):

上下左右的边框都一样的话,直接写border就可以了

上边框:

border-top-color:颜色值;上边框的颜色

border-top-style:线型;线型有solid 实线、dashed 虚线、dotted 点状线

border-top-width:粗细;像素值,2px...

简写:border:1px solid blue;

下边框:

border-top-color:颜色值;上边框的颜色

border-top-style:线型;线型有solid 实线、dashed 虚线、dotted 点状线

border-top-width:粗细;像素值,2px...

简写:border:1px solid blue;

左右:border-left  border-right...

盒子模型

内容区:width和height

边框:border

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

分为:上右下左 padding-top padding-right padding-bottom padding-left

外边距:margin 边框之外的距离

分为:上右下左 margin-top margin-right margin-bottom margin-left;

注意:如果是文档流(纵向排列),设置外边距,取两个盒子模型之间最大的间距

排列布局:

主流布局:left left right           left left left

文档流(纵向排序):div默认布局

横向排序:float

常见情况:盒子里嵌套盒子

浮动:

特点:

设置浮动的元素,不占空间

设置浮动的元素层级高于普通元素

设置浮动之后,无论之前是否是块元素,设置浮动之后一定是块元素

如果一行中的元素想横向排列,都设置浮动就可以

布局思想:

清除格式。   *{padding:0; margin:0}

设置页面属性。  设置body{}     body{font-size:14px; font-family:宋体;color:#000000;background-cplpr:#e2e2e2; line-height:150%;}

把整个页面划分结构。  如头部 内容等等的结构划分,使用div来划分

块和行内元素的转换:

行内元素:不是自己独占一行,行内元素的宽和高是由内容来决定的(设置宽高无法使用),默认的css样式是display:inline

span b i u strong a

块元素: 自己独占一行,默认宽高是0,根据宽高的内容来决定,(宽高可以设置使用),默认的css样式是:display:block

div p table ul li ol dl dt dd h1...

块->行内:

块转行内:display:inline

行内->块:

行内转块:display:block

图片溢出:当图片比块元素大时,便会溢出

使用overflow:hidden

继承:

子元素会继承父元素的设置的属性,但自己有的属性,不会向外继承

优先级:

单个选择器的优先级:

行内样式表(style) > id选择器 > 类选择器  > 标签选择器

复合选择器的优先级:

写的越精确,优先级越高 > .class ul li{} > ul li{} > li{}

浮动造成的影响和解办法:

由于父控件不能给固定高,应该根据内容来自适应高,所以在父控件里所有的div后面再加一个div,并设置这个div的clear属性为both;

clear:both;

清除浮动:

clear:left;/*清除左浮动*/

clear:right;/*清除右浮动*/

clear:both;/*清除左右浮动*/

盒子的深入计算:

计算公式:内容的width + Margin + Padding

注意:正常的文档流,margin计算时取最大值

定位(position):

方式:

static,默认设置

fixed,固定位置。不占空间。滚动时,也在原来的位置 设置偏移:left  right bottom top 如bottom:5px;

relative,相对定位。占空间。需要结合定位坐标。如果不结合定位坐标,就是原来的位置;如果结合定位坐标,相对于自身为参考点。(一般结合绝对定位来实现)

absolute,绝对定位。不占空间。不结合定位坐标,就是原来的位置;如果结合定位坐标,以设置定位坐标的父控件为参考点,如果父控件没有设置position,会找父父控件的position,一直找到父级有设置position的控件为止,来做参考点

推荐阅读更多精彩内容

  • 1、div 用于配合CSS对网页进行布局2、span 对网页进行局部修改3、区别 div会单独占住一行,span不...
    一Left一阅读 412评论 0 0
  • 什么是div? 作用:一般配合css玩成网页的基本布局。 什么是span? 作用:一般配合css玩成网页中的一些局...
    Zacks_8407阅读 183评论 0 0
  • 2017-09-07摘抄自W3school-HTML 和 希望帮助自己系统地打好基础,也能在做笔记的同时添加...
    moralok阅读 118评论 0 0
  • - 1 - 一年一度的高考季又来了。莫名有些惘然若失的情愫滋生,并且快速蔓延着,侵蚀着艾米的每一寸肌肤,每一个细胞...
    Nicole苡莯阅读 455评论 0 3
  • 我想要的是家的感觉……我想要的是互相的照顾…我觉得现在的我们生活中根本没有交集……各搞各的…体会不到你的关心……你...
    王小妞的世界阅读 98评论 0 0
  • 最惨的,并不是莫名其妙的被人给领上了一条迷路,而是当你背上孤独拿上剑,决定要马不停蹄,一意孤行的时候,突然冒出一个...
    是云胡不喜啊阅读 160评论 0 0