外观属性
color 设定文本颜色时3种方法 rgb(数字或百分号,百分号时,即使是0也要加%),16进制,英文单词
line-hight行间距(行高) 三种 px,em,%
text-align 水平对齐方式 left,right,center
text-indent首行缩进 不同单位的数值,em,%(相对于浏览器窗口的百分比) 1em就是一个字的宽度
text-decoration 文本修饰 none,underline,overline,line-through
cursor:pointer------添加鼠标样式为小手状
font: 30px “楷体” 设置字体大小和字体
选择器
标签选择器 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器 .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 类选择器可以有多个,用空格隔开。 定义时 class=“red size60”
或者是
标签名.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
多类名选择器 eg: class=“red size60”
ID选择器 #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
通配符选择器 * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special 比如:p.one选择的是类名为.one的段落标签
并集选择器 选择器,选择器{属性:值;…}
子代选择器 父级标签写在前面,子级标签写在后面,中间跟一个>进行连接,注意,符号左右两侧各保留一个空格 ul>a
后代选择器 又称为包含选择器,外层标签写在前面,内层标签写在后面, 中间用空格分隔 。当标签发生嵌套时,内层标签就成为外层标签的后代。
伪类 伪类用冒号 如:link{} hover,active,visited 选择器:伪类,顺序尽量不颠倒 就 lhave
属性选择器 根据标签的属性来选择标签,常用于输入框(input)、超链接(a) 选择器[属性1=”值”][属性2=”值”] 选择器[属性]
元素显示模式
块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性, 经典代表div
行内元素 行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性 经典代表span
注意:a里面可以放块级元素
行内块元素 可以对它们设置宽高和对齐属性,有块元素的属性,但 不能独占一行,一般不容纳其他元素 、、
背景
背景颜色 background-color:值; 取值和color的取值一致(十六进制,rgb,英文单词,rgba)
背景图片 background-image : none | url (url) none :无背景图(默认的),url :使用绝对或相对地址指定背景图像 如果有背景图片平铺,则会覆盖背景颜色
背景位置 background-position : length || length,background-position : position || position
length : 百分数 | 由浮点数字和单位标识符组成的长度值 position : top | center | bottom | left | center | right
position后面是x坐标和y坐标。可以使用方位名词或者精确单位。如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面。比如 background-position: 15px top; 则15px一定是x坐标top是y坐标。
1 如果是方位名词,那就没有先后顺序(不考虑xy了) 2 如果只写一个方位名词,另一个默认居中 3 如果是px,必须是先x后y
是否平铺 background-repeat : repeat | no-repeat | repeat-x | repeat-y repeat : 背景图像在纵向和横向上平铺(默认的)
滚动/固定 background-attachment : scroll | fixed
scroll : 背景图像是随对象内容滚动 fixed : 背景图像固定 滚动/固定是相对于浏览器的
简写 建议书写顺序 background:颜色 图片地址 平铺 滚动 位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;