1.CSS注释代码
/*注释语句*/
2.CSS样式分3种:内联式、嵌入式、外部式
a.内联式 css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:
<p style="color:red">这里文字是红色。</p>注意: 要写在元素的开始标签里, 并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开
<p style="color:red;
font-size:12px">这里文字是红色。</p>
b.嵌入式 嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间
<style type="text/css"> span{ color:red; } </style>一般情况下,嵌入式css样式写在<head></head>之间。
c.外部式 也称为外联式,就是把css代码写在一个单独的外部文件中,以".css"为扩展名,在<head>内使用<link>标签将css样式文件链接到HTML文件内
<link href="base.css" rel="stylesheet" type="text/css" />
注意:
css样式文件名称以有意义的英文字母命名,如main.css
rel="stylesheet" type="text/css"是固定写法不可修改
<link>标签位置一般写在<head>标签之内
调用的css相对路径是否正确:
1、"/xxx.xx" 表示从网站根目录开始,即网站根目录下的xxx.xx文件
2、"./xxx.xx"表示本目录下的xxx.xx
3、"../xxx.xx"表示上一级目录中的xxx.xx,当然,"../../xxx.xx"表上上一级目录中的xxx.xx
4、"xxx/"表示当前目录下的xxx文件夹,也相当与"./xxx/"
优先级:就近原则
内联式 > 嵌入式 > 外部式
3.选择器
每一条css样式声明(定义)由两部分组成,形式如下:
选择器{ 样式; }4. 标签选择器其实就是html代码中的标签
p{font-size:12px;line-height:1.6em;}5.类选择器
.类选器名称{css样式代码;}
注意:
a、英文圆点开头
b、其中类选器名称可以任意起名(但不要起中文)
.stress{color:red;}/*类前面要加入一个英文圆点*/
<span class="stress">胆小如鼠</span>
6.ID选择器
a、为标签设置id="ID名称",而不是class="类名称"。
b、ID选择符的前面是井号(#)号,而不是英文圆点(.)。
#setGreen{ color:green; }
<span id="setGreen">公开课</span>7.ID选择器和类选择器的区别
a、ID选择器只能在文档中使用一次
b、可以使用类选择器词列表方法为一个元素同时设置多个样式。
下面代码是正确的:
.stress{ color:red; } .bigsize{ font-size:25px; } <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>下面代码是错误的:
#stressid{ color:red; } #bigsizeid{ font-size:25px; } <p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>8.子选择器,即大于符号(>),用于选择指定标签元素的 第一代子元素。
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li加入红色实线边框。
9.包含(后代)选择器,即加入空格,用于选择指定标签元素下的后辈元素。
子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
举例地址:点击打开链接
10.通用选择器,使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:
* {color:red;}11.伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红
12.分组选择符,想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:
h1,span{color:red;}13.权值,为同一个元素设置不同的css样式代码,根据权值决定启用哪一个。
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。
14.设置最高权值
p{color:red!important;}
排版
1.字体
body{font-family:"Microsoft Yahei";}
2.字号、颜色
body{font-size:12px;color:#666}3.粗体
p span{font-weight:bold;}
值 | 描述 |
---|---|
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
| 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
p a{font-style:italic;}
值 | 描述 |
---|---|
normal | 默认值。浏览器显示一个标准的字体样式。 |
italic | 浏览器会显示一个斜体的字体样式。 |
oblique | 浏览器会显示一个倾斜的字体样式。 |
inherit | 规定应该从父元素继承字体样式。 |
p a{text-decoration:underline;}这个属性允许对文本设置某种效果,如加下划线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
blink | 定义闪烁的文本。(浏览器不支持) |
inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
p{text-indent:2em;}
注意:2em的意思就是文字的2倍大小。
7.行间距
p{line-height:1.5em;}8.字间距
汉字、字母间隔:
h1{ letter-spacing:50px; }
单词间隔:
h1{ word-spacing:50px; }9.块状元素中的文本、图片设置对齐方式
h1{ text-align:center; }
值 | 描述 |
---|---|
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值。 |
10.元素分类:块状元素、内联元素、内联块状元素
常用的块状元素有:
<div> <p> <h1> ...<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
常用的内联元素有:
<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
常用的内联块状元素:
<img> <input>
11.块状元素特点:
a.每个块状元素都从新的一行开始,并且其后的元素也另起一行。
b.元素的高度、宽度、行高及顶和底边距都可设置
c.元素宽度在不设置的情况下,是它本身父容器的100%
设置display:block就是将元素显示为块状元素
a{display:block;}块状元素可以通过代码设置称为内联元素
display:inline
12.内联元素特点:
a.和其他元素都在一行上
b.元素的高度、宽度、及顶部和底边距不可设置
c.元素的宽度就是它包含的文字或者图片的宽度,不可改变
13.内联块状元素的特点:
a.和其他元素都在一行上
b.元素的高度、宽度、行高以及顶部和底边距都可以设置
display:inline-block
盒子模型
内边距:padding
外边距:margin
边框:border
都有4个方向
1.边框:可以设置 粗细、样式、颜色 三个属性
div{ border:2px solid red; }or
div{ border-width:2px; border-style:solid; border-color:red; }a.border-style常见样式有:dashed虚线、dotted点线、solid实线
b.border-color颜色可以设置为16进制颜色
border-color:#888;//前面的井号不要忘掉。c.border-width宽度也可以设置为thin、medium、thick,最常用的还是像素px
d.单独设置某一边框
div{border-bottom:1px solid red;}
border-top:1px solid red; border-right:1px solid red; border-left:1px solid red;2.盒模型的宽度和高度
css内定义的宽和高指的是填充以里的内容范围
元素实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
元素的高度同理
3.盒模型-填充
元素内容与边框之间设置的距离称之为“填充”。填充也分为上、右、下、左(顺时针)
div{padding:20px 10px 15px 30px;}如果上右下左的填充都为10px
div{padding:10px;}如果上下一样,左右一样
div{padding:10px 20px;}
CSS布局模型
1.流动模型
流动(flow)是默认的网页布局模式,网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。流动布局模型有2个比较典型的特征:
a.块状元素都会在所处的包含元素内自上而下安顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
b.流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。
2.浮动模型
如果想让两个块状元素并排显示,设置元素浮动,如div、p、table、img等元素都可以被定义为浮动
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
3.层模型
层模型就像是PS中的图层编辑,没个图层嫩巩固精确定位操作,适合在网页局部使用。层模型有三种形式:
a.绝对定位(position:absolute)
b.相对定位(position:relative)
c.固定定位(position:fixed)
——绝对定位,需要设置position:absolute,这条语句将元素从文档流中拖出来,然后用left、right、top、bottom属性相对于其最近的一个具有定位属性的父包含块进行绝对定位,如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。如下面的带啊名实现div元素相对于浏览器窗口向右移动100px,向下移动50px
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
效果如下
——相对定位:position:relative相对于以前的位置移动。相对定位完成的过程是首先按照static(float)方式生成一个元素,然后相对于以前的位置移动,偏移前的位置保持不动。
理解起来就是 之前的位置跟普通网页一样,照常使用
——固定定位:position:fixed; 与absolute定位类型相似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。除非在屏幕中移动浏览器窗口的屏幕位置,或者改变浏览器窗口的显示大小,否则固定定位的元素始终会位于浏览器窗口视图内的某个位置,不会受文档流动的影响,拖动滚动条时位置固定不变。
个人感觉,就比如QQ最上面的导航栏
——relative与absolute组合使用:相对于其他元素进行定位 position:absolute
注意:
a.参照定位的元素必须是相对定位元素的前辈元素
b.参照定位的元素必须加入position:relative;
c.定位元素加入position:absolute 便可以使用top、bottom、left、right来进行偏移定位了
单位和值
1.颜色值
a.英文命令颜色
p{color:red;}b.RGB颜色
p{color:rgb(133,45,200);}or
p{color:rgb(20%,33%,25%);}c.十六进制颜色 这种颜色设置方法是现在比较普遍使用的方法
p{color:#00ffff;}

2.长度值
a.像素:指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于像素作为单位。
b.em:就是本元素给定字体的font-size值,如果元素的font-size为14px,那么1em=14px。
c.百分比
水平居中总结
1.不定宽块状元素
a.加入table标签
第一步:加入table标签
第二步:为这个table左右margin居中
html代码:
<div> <table> <tbody> <tr><td> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody> </table> </div>
css代码:
<style>
table{
margin:0 auto;
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>
b.设置display:inline方法,然后用text-align:center实现居中
html代码:
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代码:
<style> .container{ text-align:center; } .container ul{ list-style:none; margin:0; padding:0; display:inline; } .container li{ margin-right:8px; display:inline; } </style>
c.设置position:relative 和 left:50%
给父元素设置float,然后给父元素设置position:relative和left:50% 子元素设置position:relative和left:-50% 来实现居中
代码如下:
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代码:
<style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style>垂直居中总结
1.父元素高度确定的单行文本:通过设置父元素的height和line-height高度一致来实现
<div class="container"> hi,imooc! </div>
css代码:
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
2.父元素高度确定的多行文本
a.使用插入table标签,同时设置vertical-align:middle 说白了就是把文本内容放到表格里,再设置表格居中
css中用于数值居中的属性vertical-align,但这个样式只有在父元素为td或者th时,才会生效。所以需要插入table标签。
html代码:
<body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
css代码:
table td{height:500px;background:#ccc}
b.在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式
同上
ml代码:
<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </div>
css代码:
<style> .container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>c.隐形改变display类型。
当元素设置以下2个句之一:
- position : absolute
- float : left 或 float:right
元素会自动变为以display:inline-block的方式显示
inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align 属性。
HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生了元素间的空隙。