#css2.0入门
##css简述
CSS( Cascading Style Sheet )是指层叠样式表,这些样式定义如何显示HTML元素。这是由于如果是一个大型的网页,所有代码都写在一个HTML文件里面的话,会很不容易管理,同时代码的简洁度也不够,所以讲HTML文件内相同的样式提取出来,写到专门的CSS文件内,在通过引用的方式得以展现,大大提高了代码的复用率,提高了整体开发的效率,学习CSS就是学习一堆的选择器和属性。
##css主要作用
css 主要作用有两点布局与美化
-
布局
盒子模型
-
width:盒子内容部分的宽度 height:盒子内容部分的高度
在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。 -
padding:盒子内填充区域(如图,盒子内容部分与边框之间的区域)
padding
用来设置内填充,也叫补白 表示内容区域和边框之间的距离
四个方向: 用的也比较多的
padding-top:
padding-right:
padding-bottom:
padding-left:padding后面也可以跟一个值,二个值,三个值,四个值:
一个值:padding:10px 四个方向的padding都是10px
二个值:padding:10px 20px; 上下是10px 左右是20px
三个值:padding:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值:padding:10px 20px 30px 40px; 上 右 下 左注意点:
1)有些标签是有默认的padding 如ul ol… 等 一刀切 *{ padding:0; }
2)对于行内元素来说,padding在垂直方向上不影响行高,效果上看似是有padding,但是>padding不是真正的padding,或者说对于一个女盒子来说,padding在垂直方向上无效。
3)对于块级元素来说,上下padding可以撑起男盒子的高度。 -
border:盒子边框
边框的粗细 border-widht
边框的样式 border-style
边框的颜色 border-color
一般情况下,不会单独设置 border是一个复合属性
注意点:
1)border:1px solid red; border后面的属性是没有顺序的,但是一般都是先写>border-width,然后是border-style,最后是border-color。
2)粗细大部分情况下单位都是px 你也可以使用单词 使用单词时 在不同的浏览器下代表粗细>是不一样的
3)边框的样式也非常多 用的非常多的有这几个:solid 实线 dotted 点画线 dashed 虚线 none 没有线 …
4)边框的颜色设置 单词 用的最多还是16进制 也可以使用rgb函数
5)也可以单独设置某一个方向上的border border-top:1px solid red; 用的也比较多 -
margin:盒子外填充部分(如图,盒子边框之外的部分)
表示外边距 盒子与盒子之间的距离 是边框之外的间隔 是在border之外的
四有个方向:
margin-top
margin-right
margin-bottom
margin-left
margin后面也可以跟一个值,二个值,三个值,四个值:
一个值:margin:10px 四个方向的margin都是10px
二个值:margin:10px 20px; 上下是10px 左右是20px
三个值:margin:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值:margin:10px 20px 30px 40px; 上 右 下 左注意点:
1)有此标签有默认的margin 一刀切 *{ margin:0; padding:0; }
2)对于行内元素来说,margin在垂直方向上是无效的
3)margin可以设置auto。 表示尽可以大 div{ margin:0 auto; }
4)margin可以设置负值
5)对于块级元素来说,margin有重叠问题(塌陷问题) -
background:背景色与背景图(注:img标签也是一个盒子,也可以添加背景)
背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。{background-color: gray;}
背景色从元素中的文本向外少有延伸,只需增加一些内边距:
{background-color: gray; padding: 20px;}
background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
背景图
要把图像放入背景,需要使用 background-image 属性。
如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:{background-image: url(/i/eg_bg_04.gif);}
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
可以利用 background-position 属性改变图像在背景中的位置
将一个背景图像居中放置:{ background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:center; }
浮动设置
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。- float
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任>何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
left:元素向左浮动。
right:元素向右浮动。
none:默认值。元素不浮动,并会显示在其在文本中出现的位置。
inherit:规定应该从父元素继承 float 属性的值。
元素浮动会造成影响:
1)对父元素造成的影响
2)对后面的兄弟元素影响
我们需要清除浮动所造成的的影响,也叫清除浮动:
1)清除对父元素所造成影响
A)overflow:hidden
B)加高法
元素浮动也会对它后面的元素造成影响:
后面的元素会钻上去,但是文字不会,文字会形成字围效果。 对兄弟元素造成影响,我们需要清除这种影响,也叫清除浮动。
最最专业的:clear: left/right/both clear:both
注释:clear:both只能写在第1个受影响的元素上,写在父元素上没有什么用。 -
-
美化
美化常用的是字体与文本设置
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。- 系列
使用 font-family 属性 定义文本的字体系列
- 大小
font-size 属性设置文本的大小。
通过像素设置文本大小
可以对文本大小进行完全控制:h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;}
使用 em 来设置字体大小
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在>设置字体大小时,em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em:pixels/16=em
(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em)
结合使用百分比和 em
在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:body {font-size:100%;} h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;}
- 加粗
font-weight 属性设置文本的粗细
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预>定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会>导致浏览器将加粗度下移而不是上移。- 风格(文字是否倾斜)
font-style 属性最常用于规定斜体文本
该属性有三个值:
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示- 变形(如小型大写字母)
font-variant 属性可以设定小型大写字母
小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用不同大小的大写字母。p {font-variant:small-caps;}
css文本设置,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
- 文本颜色
color属性用来设置文本颜色
body {color:red} h1 {color:#00ff00} p.ex {color:rgb(0,0,255)}
- 文本装饰
text-decoration 属性通常用来装饰文本
none 关闭原本应用到一个元素上的所有装饰
underline 对元素加下划线
overline 在文本的顶端画一个上划线
line-through 在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素
blink 会让文本闪烁- 文本缩进
text-indent 属性用来设置文本缩进
通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
2em 空两个汉字的宽度
-1000em 把隐藏一个盒子中的文本- 对齐方式
text-align属性用来设置文本对齐方式
left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。- 设置行高
line-height 属性用来设置行高
如果是子标签是男标签,行高可以撑起子标签的高度
把隐藏一个盒子中的文本- 对齐方式
text-align属性用来设置文本对齐方式
left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。- 设置行高
line-height 属性用来设置行高
如果是子标签是男标签,行高可以撑起子标签的高度
如果是子标签是女标签,行高不能撑起子标签的高度