关于网页中标签的id、class属性
1. 网页中任何一个标签都可以有id属性
id=identity,标识
标签加入id属性用于快速标识这个标签所在位置,也就是定位一个标签的过程,通常用于js代码和css设置。
语法: <标签 ID=”id名”>
id属性名称不区分大小写。
同一个网页内,id名不能重复2. 除了head, html, meta,title等标签,网页中任何一个标签都可以有class属性
class标签就是类,相当于使该标签从属于该类。
类名是自己起的,跟变量名的命名规则基本相同。
类名相同的标签属于同一个类
一个标签可以同时属于多个类
语法:
<标签 class=”类名 [类名]”>
一个标签可以同时属于多个类,多个类名之间用空格隔开即可
class属性跟id属性用法类似,不过通常用于一次对若干标签进行操作关于style属性
1、 style,样式。可用于所有标签,作用是改变其外形。若干样式并列,就组成了样式表css
2、 有行内样式表、内部样式表、外部样式表三种写法
3、 行内样式表语法
<标签A style = ”
属性1:值1;
属性2:值2;……
属性n:值n;
” >
CSS的概念
1、 CSS=Cascade Style Sheet
级联 样式 表
2、 CSS的作用是 美化、修饰页面的各个标签
3、 CSS可以直接在HTML网页文件使用
也可以作为一个独立的.css文件使用
4、 即便CSS直接写在网页文件中也是一个独立工作部分
在写style时,可以加入网页注释
1、 网页的注释,对网页输出无影响
2、 网页的注释,对css的style中的代码也无影响
3、 写注释的目的的
以防style有特殊字符,>,>=,<,<=,&等符号出现
这些特殊符号出现后,有可能错误的解释,使页面混乱
4、 如果style代码中,无特殊字符,这个注释的存在就没什么意义。但以防万一,还是写上最好
CSS选择器的3个选择符
1、 类选择符,class 选择符
以“.”开头
.myCss1{
。。。
}
2、 id选择符
选择符名称以”#”开头
没有可视化绑定方法,只能手工在标签上加入id属性
#myId1{
。。。
}
3、 固定标签选择符
css变量名称前面没有任何标识(.,#)
这个名称必须是一个己存在的标签
div{
。。。
}
span{
。。。
}
需要注意的是,当你用不同的方式选中同一个标签,设置相同的样式时,这些选择方式是有优先级区别的,优先级排列为:行内样式表>内部样式表>外部样式表
而在内部样式表和外部样式表中,id选择符 >类选择符 >标签选择符
当你在多个地方对同一标签设置了同一样式时,优先级较高的设置会生效
关于CSS的级联表示方法,父子级联方法
1、 CSS的级联内含
父标签――> 子标签 ――> ……――>继续
一级级缩小范围
2、 css级联表示语法
第1级css选择器 第2级css选择器 第n级css选择器{
css属性1:值1;
css属性2:值2;
css属性n:值n;
}
3、 上面每个级联的名称之间是一个英文空格,或多个英文空格
4、 级联时每个css名称可以3种选择器之一,可以交叉混合使用
关于多个CSS选择器同时定义方法,用一个逗号隔开
1、 含义
每一个css选择器可以独立设计
多个CSS选择器共享同一段样式表
2、 语法
第1个css选择器,第2css选择器,第n个css选择器{
css属性1:值1;
css属性2:值2;
css属性n:值n;
}
3、 表示上面css定义同时作用于这里定义的所有css选择器
4、 每一个css选择器可以独立设计,也可以不存在
一个标签可以属于多个类
方法就是在class属性中多写几个类,用空格分开,例如:
<div class=”myclass1 myclass2 myclass3 ……”></div>
这样写的话,这个div就同时属于这几个类,用这几个类作为选择器来设置的样式,全都会对这个div生效
类选择器的特殊用法
用级联写法时,类选择器前面是否有空格,意思是不同的。
div .a1{←注意div和.a1之间有空格,这是选中所有div标签中,有a1这个类的子标签,不管这些子标签是什么种类
div.a1{←注意div和.a1之间没有空格,这是选中所有div标签中,有a1这个类的div标签,跟有没有子标签无关,但必须是div标签
有空格是普通的级联写法,没空格则是选择所有该标签中,有这个类的那部分。
关于css的display属性
1、 display是页面布局的关键属性之一
2、 他的值有
display:none; --不显示,隐藏,如同不存在,页面布局会被改变
display:; --显示
display:block; --块元素,意思是可以设置宽度高度,同时在标签后面会自动换行,类似div
display:inline-block; --内联块元素,意思是可以设置宽度高度,同时在标签后面不会自动换行
display:inline; --内联元素,意思是不能设置宽度高度,同时在标签后面不会自动换行,类似span关于css的visibility属性
1、 是页面布局的关键属性之一
2、 让一个标签对象不显示, 在屏幕上占的空间还在
3、 语法 visibility:hidden;
关于css的margin属性
1、 margin,外边沿
2、 内含
一个标签的外部四边空间,本标签的外边沿
关于css的padding属性
1、 表示当前标签的内部子标签与边框的距离
类似于table的cellpadding属性
关于css的border属性
1、 表示四边框显示,包括
宽度
线的显示格式(点线,实线,点划线,,,)
线的颜色
每个边可以独立控制
可以四边同时控制
关于背景色与背景图片冲突问题
1、 任何一个标签可以用背景色,也可以用背景图片,如果2者同时存在,背景图优先
关于背景图片定位方法
1、 背景图片可以x,y方向的移位
2、 语法
background-repeat:no-repeat;(设置不重复,效果类似桌面背景的“平铺”)
background-position:左右水平方向移位 上下垂直方向移位;
数值为负时,从上方或左边截掉这么多像素。
数值为正时,往文字显示方向移位。水平方向,向右移;垂直方向,向下移。
这个移动是以父标签的左上角作为坐标原点的
该定位的效果优先于其他类似效果。
注意,必须先加入背景图片,才能写是否重复、定位等属性,如果顺序颠倒过来是无效的,例如:
background-repeat:no-repeat;
background-position:top;
background-image:url(bg.JPG);
按照这样顺序写,前两项样式设置是无法生效的,因为背景图是在后面引入的