HTML/CSS 第五章笔记

发布于 2016-11-11  10.76k 次阅读


CSS笔记
1.样式的申明种类:
1.1:行内样式,在标签里写style属性,在它的属性值里写样式.多个样式用;(分号)隔开.
如<h1>一级标题</h1>给它写行内样式:
<!--把h1标签设置了颜色为红色,字体大小为15像素.-->
<h1 style="color:#f00; font-size:15px;">一级标题</h1>

1.2:内部样式,在页面的<head></head>标签里写样式,关系到选择器,后面会讲.语法:在head里用style标签写,格式如下:
<style type="text/css">
/*h1是标签选择器(下面是选择所有的h1标签),后面会重点讲*/
h1 {
color:red;
font-size:15px;
}
</style>

1.3:外部样式,建一个文件专门写CSS,与html面页分离.
1.3.1:链接外部样式表(非常重要)
语法:常用三个属性值
<head>
<link href="css文件URL" rel="stylesheet" type="text/css" >
</head>
1.3.2:导入外部样式表(不常用)
语法:
<head>
<style type="text/css">
<!--
@import url("css/style1.css");
-->
</style>
</head>
1.3.3:使用import导入样式与link链接样式的区别:
1.加载顺序不同:使用link链接样式是在加载HTML文件的同时,加加CSS样式文件,而用使@import则等于要把HTML文件加载完再加载CSS样式,网速慢时,有时浏览器刚开始显示网页不正常则更明显.
2.@import是CSS2.1提出的使用方式,一些老的浏览器不支持,比如IE4.0以下版本
3.当以后使用JAVASCRIPT控制DOM改变页面样式时,使用link链接的就支持,而@import则不可控.
4.<link>是一个html标签,而@import则完全是CSS提供的一种方式.
所以:我们以后使用的外部样式,都是使用<link>链接样式表.

优先级:
在网页中,样式表的优先级采用就近原则,所以:
行内样式优选级最高,其次是内部样式表,最后是外部样式(外部样式表中,用link链接的样式表比@import导入的要高.)
以后我们在开发中,最好只用其中的一种或两种样式表,有利于后期的维护,也不会出现各种"撞车"的情况.
2.CSS选择器
在讲选择器之前,我给大家讲个HTML属性:
全局属性:比如我们前面学过的:name属性,style属性
我们在这要讲的是:
class属性: 规定元素的一个或多个类名.
id属性: 规定元素的唯一 id。
class属性语法:任意一个HTML元素都可以写它的这个属性值
比如:<p class="p1"><p/> 或 <h1 class="hhhh"></h1>
ID属性:
比如:<p id="p1"><p/> 或 <h1 id="hhhh"></h1>
写在一起:如:<p id="p1" class="cp1"><p/>

再次强调:
不管多少个元素有ID属性,但它们的值不能重复.(比如身份证号码,银行卡号码,手机号码,QQ号码....)
class属性则不同,就像是我们的班级,每位同学都有,而且可以重复,目的是为了把元素分组.而且可以是多个值.用空格隔开.

1.选择器:* 表示选择所有元素.
语法: *{属性:属性值;....}

2.类选择器:. 表示选择元素class值相同的所有html元素.
语法: .class值{属性:属性值;属性:属性值;....}

3.标签选择器:标签名,如:h1,p... 表示选择所有标签名相同的html元素.
语法: p{属性:属性值;....}

4.id选择器:# 表示选择ID所在的唯一值元素.
语法: #id值{属性:属性值;....}

练习代码:(无HTML代码配合,不抄笔记,拿配套HTML去理解与练习) 多动手练...
/*所有元素选择器*/*
/**{color:#F00;}*/

/*类选择器*/
/*.hdm{color:#0F0;}*/

/*ID选择器*/
#li1{ background-color:#060;}
#li2{ background-color:#C90;}
#li3{ background-color:#060;}
#li4{ background-color:#C90;}

/*元素名选择器*/
p{color:#F30;}
li{color:#666;}

CSS其实比HTML更简单,但是,我们必须熟记它的属性与属性值......
选择器优先级:越精准越优先.ID选择器>CLASS(类)选择器>标签选择器>*(全部)选择器

文本与文字属性:
font-size:文字大小
常用单位:
px-像素
100%-相对父元素大小
em与百分比很相似(取父元素为基准,1为100%)

font-family:字体,(宋体,仿宋,黑体,Arial,Times New Roman)
如果怕字体没有,可设置多个,用逗号隔开,如果字体名中有空格或是中文,用双引号引起来.以免无效.

font-weight:字体粗细 它的值:normal(400) bold(700)

font-style: 字体是否倾斜 它的值:normal italic(斜体) oblique(一般字体在设计时不支持斜体,倾斜就得用他)

font:缩写:就是可以把多个样式进行简化进行书写(各值用空格隔开)
语法:font:font-style font-variant font-weight font-size / line-height font-family )
<p>测试字体样式</p>
<style type="text/css">
/*font简写:加粗 大小24像素 黑体*/
p{font: bold 24px "黑体";}

/*比如上面加入行高*/
p{font: bold 24px/50px "黑体";}
</style>

line-height:设置行高(每一行占多高) 一般用px与em做为单位
语法:p{line-height:50px;}

text-align:设置文本水平对齐,它的值有三个:left center right
语法:p{text-align:center;}/*文本水平居中对齐*/

letter-spacing:(字符间距)对中文不是很常用
语法:p{ letter-spacing:20px;}

text-decoration:本文修饰 它的常用值:line-through删除线 underline下划线 none不加任何线
语法:p{ text-decoration:none;}
他的应用常用于去掉a标签的下划线.

white-space:空白处理
它的值:
normal默认。空白会被浏览器忽略。
nowrap不换行

每一个块级标签常用样式:
1.width :设置标签的宽度
2.height:设置标签高度:注意与line-height的区别!
3.border:是否显示边框,后面第六章会有重点学习.(它有三个属性)
格式: width:200px;height:300px;border:1px;

背景:background
1.background-color:背景颜色
语法: background-color:#f00;
2.background-image:背景图片
语法: background-image:url("图片地址");
3.background-repeat:背景重复方式,它常用的三个值(no-repeat,repeat-x,repeat-y)
语法: background-repeat:no-repeat;
4.background-position:背景图片起始对齐位置:它用2个值:水平 垂直,值列表(left,center,right top bottom)
语法: background-position:left top;
或用数字表示:background-position:20px 20px;/*离左边20像素地方开始,最顶部20像素开始,如果是负数则图片显示不全*/

列表样式:list-style
1.list-style-image:(用图片显示列表的标志)(值:url("图片地址"))

2.list-style-type:(设置列表标志样式: list-style-type:disc实心圆点(默认),circle(空心圆);square(方块) 最重要的值:none不显示列表标志)

3.list-style-position:(设置列表标志的位置:outside标志在文本以外,inside标志在文本以内)

浮动:float
float:left左浮动; right右浮动;
清除浮动:
clear:left不允许左边浮动; right不允许右边浮动; both两边都不允许浮动;