一、CSS和HTML结合的方式有如下四种:
1.通过style设置行内标签
2.通过在<style>样式</style>里设置样式
3.通过在<style>@import url(样式.css);</style>的方式导入外部样式
4.通过在<head></head>标签内,使用<link rel="stylesheet" href="样式表.css" type="text/css" />标签,连接到外部样式表
二、常见CSS样式使用方法:
1.样式优先级
>由上到下,由外到内,优先级由低到高
>标签选择器 < 类选择器 < ID选择器 < 行内样式
2.总结CSS代码格式
选择器名称{属性名:属性值;属性名:属性值;......}
属性与属性之间用 分号 隔开
属性与属性值用 冒号 连接
如果一个属性有多个值的话,那么多个值用 空格 隔开。
3.选择器
就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。
选择器共有三种:
a) html标签名选择器。使用的就是html的标签名。比如要设置a标签的样式:a{样式......}
b) class选择器。其实使用的标签中的class属性,比如要设置div标签中,class属性为name1的标签的样式:div.name1{样式......},
如果要设置所有class属性为name1的标签的样式,去掉前面的div 就行了,不写就代表所有
c) id选择器,其实使用的是标签中的id属性。每一个标签都定义了class属性和id属性。用于对标签进行标识,
方便对标签进行操作。在定义中,多个标签的class属性值可以相同,而id值要唯一,因为除了css中用到id,
javascript中也经常用,不唯一的话,结果会出现偏差。
比如对所有div标签中,一个id叫name2的标签进行样式的设置:div#name2{样式......}
4.关联选择器
如果要设置div标签下的span标签下的a标签的样式,设置方式为:div span a{样式......}
5.组合选择起
如果要设置div中的span标签的样式,同时设置class属性为haha的标签的样式,两者样式效果一样,可如下设置:
.haha,div span{样式...... }
多个选择器之间用逗号分开
6.伪元素选择器:
这个一般说的是a标签的四种状态:link、visited、hover、active,简称LVHA为了记住,可以这样想,看到LV的包我就HAHA笑
>点击前:a:link{样式......}
>点击后:a:visited{样式......}
>鼠标悬停时:a:hover{样式......}
>点击时:a:active{样式......}
现在很多高版本的浏览器都开始支持各种标签的伪元素选择器了,不光是a标签可以用了,不过IE6还是不支持其他元素的伪元素效果,
开发时需要注意,其他伪元素选择器列举如下:
<1>.给段落的第一个字母加样式:p:first-letter{样式......}
<2>.给段落的第一行文本加样式:p:first-line{样式......}
<3>.给div加上悬停效果:div:hover{样式...... }
<4>.给input框设置焦点样式:input:focus{样式}
7.具体是CSS的一些属性值,可以参考CSS2.0的API
8.CSS+DIV的盒子模型:
>大盒子+小盒子+内容:大盒子里面放小盒子,小盒子里面方内容
>内容跟小盒子的距离叫做内边距,用padding来设置内边距的大小,用padding-top,padding-right,padding-bottom,padding-left可以分别设置上、右、下、左边距的大小
>小盒子跟大盒子的距离叫外边距,用margin来设置外边距的大小,用margin-top,margin-right,margin-bottom,margin-left可以分别设置上、右、下、左边距的大小
9.CSS的布局:漂浮
9--1:float属性设置层的漂浮属性:
a>left:被设置float属性值为left的层,自己被固定到了左边,它底下的内容流向了右边
b>right:被设置float属性值为left的层,自己被固定到了右边,它底下的内容流向了左边
9--2:clear属性设置是否清除float带来的影响,允不允许有浮动对象的边
a>none:默认值,允许两边都可以有浮动对象
b>left:不允许左边有浮动对象
c>right:不允许右边有浮动对象
d>both:不允许有浮动对象,也就是左右两边都不允许有浮动对象
9--3:position属性设置对象的定位方式
a>static:默认值。无特殊定位。
b>absolute:将对象从文档流中拖出,设置该值后,该对象的位置会空出来,下面的内容会挤上来,该对象已经漂浮到层上面来了,
使用top、bottom、left、right可以确定漂浮的具体位置,如果该层对象里面还有子层,而且子层也设置了position属性的值为absolute,
那么,子层设置的top、bottom、left以及right属性的值将是相对父级的层而言的,也就是说他的位置是相对于父层的位置了,
而不是body了。默认是相对body而言来设置的top、bottom、left、right属性的。
c>relative:对象在正常文档流中偏移位置,没有从文档流中拖出来,位置不会空出来,仍然会占着那个位置,下面的内容不会挤上来,不会出现层叠效果,如果
这时候该对象设置了偏移位置,它里面的子层设置了position属性的值为absolute或relative后,子层的偏移位置也是相对于父层来确定的,而不是body
10.图文混排的操作
a>将图片用div封装起来,也就是传说中的封装到一个盒子里面
b>将文字也用div封装起来
c>将文字和图片的两个盒子(div)装进一个大的盒子里
d>设置图片盒子的float属性为left或right(要把图片放到哪边看你自己需求了),这样就形成了文字环绕图片的效果,形成图文混排