使用CSS样式的方式
HTML <!DOCTYPE>声明标签(H5声明标签)
(1)内链样式表:<body style="background-color:green; margin:0; padding:0"></body>
(2)嵌入式样式表:<style type="text/css"></style>(需要将样式放在<head></head>)
(3)引入式样式表:<link rel="StyleSheet" type="text/css" href="style.css">(需要将样式放在<head></head>)
定义样式表
HTML标记定义<p>...</p>
p{属性:属性值; 属性1:属性值1} 一个选择器可以控制若干个样式属性,他们之间需要用英语的“;”隔开,最后一个可以不加;
Class定义<p class="p">...</p>
class定义是以"."开始 如.p{属性:属性值; 属性1:属性值1}
ID定义<p id="p">...</p>
ID定义是“#”开始的,如#p{属性:属性值;属性1:属性值1}
优先级问题
(1)ID>Class>HTML
(2)同级时选择离元素最近的一个,如
#p{color:red}
#p{color:#f60} 执行颜色为#f60
组合选择器(同时控制多个元素)
如,h1,h2,h3{font-size:14px; color:red; } 选择器组合可以使用 “,” 隔开
伪元素选择器
(1)a:link 正常连接的样式
(2)a:hover 鼠标放上去的样式
(3)a:active 选择链接时的样式
(4)a:visited 已经访问过的链接的样式
常见属性
颜色属性
(1)color:green (2) color:#ff6600 (3)color:rgb(255,255,255) (4)color:rgb
字体属性
(1)字体大小:font-size
(2)自定义字体:font-family
(3)字体加粗:font-weight (normal、bold、bolder、lighter)
(4)字体样式:font-style (normal、small-caps、inherit(继承))
(5)小型大写字母显示文本:font-variant (normal、small-caps、inherit(继承))
背景属性
(1)背景颜色:background-color
(2)背景图片:background-image:url(图片路径)
(3)背景重复:background-repeat(repeat、repeat-x、repeat-y、no-repeat)
(4)背景位置(横向:left、center、right;纵向:top、center、bottom)
(5)简写方式:background:背景颜色 url(图像)重复 位置
文本属性
(1)横向排列:text-align(left、center、right)
(2)文本行高:line-height
(3)首行缩进:text-indent
(4)字符间距:letter-spacing(normal、length、inherit(继承))
(5)单词间距:word-spacing
(6)文本方向:direction(ltr从左到右/rtl从右到左)
(7)文本大小写:text-transform
边框属性
(1)边框风格:border-style
单独定义某一方向的边框样式:border- bottom-style(下边边框样式)、border- top-style(上边边框样式)、border-left-style(左边边框样式)、border- right-style(右边边框样式)
边框风格样式的属性值:none(无边框)、solid(直线边框)、dashed(虚线边框)、dotted(点状边框)、double(双线边框)、groove(凸槽边框)、ridge(垄状边框)、inset (inset边框)、outside(outside边框)、inherit(继承)
(2)边框宽度:border-width
单独风格:border- bottom-width(下边边框宽度)、border- top-width(上边边框宽度)、border-left-width(左边边框宽度)、border- right-width(右边边框宽度)
边框宽度的属性值:thin(细边框)、medium(中等边框)、thick(粗边框)、px(固定值的边框)、inherit(继承)
(3)边框颜色border-color
单独风格:border- bottom-color(下边边框颜色)、border- top-color(上边边框颜色)、border-left-color(左边边框颜色)、border- right-color(右边边框颜色)
属性值:red、green等颜色值的名称、RGB(rgb(255,255,0))、RGBA(rgba(255,255,0,0.1))、#ff0/#ff0000十六位进制、inherit(继承)
属性值的四种情况:一个值:border-color:(上、下、左、右)、两个值:border-color:(上下(左右)、三个值:border-color:(上)(左、右)(下)、四个值:border-color:(上)(下)(左)(右)
列表属性
(1)标记的类型:list-style-type
none(无标记)、disc(默认。标记是实心圆)、circle(标记是空心圆)、square(标记是实心方块)、decimal-leading-zero(0开头的数字标记)、lower-roman(小写罗马数字)、upper-roman(大写罗马字母)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)
(2)标记的位置:list-style-position
inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside默认值,保持标记位于文本的左侧。列表项目标记放置在文本意外,且环绕文本不根据标记对齐。
inherit规定应该从父元素继承list-style-position属性的值。
(3)设置图像列表标记:list-style-image
URL 图像的路径
none 默认,无图形被显示
inherit 规定应该从父元素继承list-style-image属性的值
(4)简写方式
list-style:square inside url("image.jpg")
DIV+CSS布局
div和span
DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式。二者的区别在于,span是内联元素,div是块级元素。
盒模型
margin盒子外边距
padding盒子内边距
border盒子边框宽度
width盒子宽度
height盒子高度
布局相关的属性
(1)position定位方式:relative(正常定位)、absolute(根据父元素进行定位)、fixed(根据浏览器窗口进行定位)、static(没有定位)、inherit(继承)
(2)定位(离页面顶点的距离):left(左)、right(右)、top(上)、bottom(下)
(3)z-index(层覆盖先后顺序)
(4)display显示属性:none(层不显示)、block(块状显示,在元素后面换行,显示下一个块元素)、inline(内联显示,多个块可以显示在一行内)
(5)float浮动属性:left左浮动、right右浮动
(6)clear清除浮动:both
(7)overflow溢出处理:hidden(隐藏超出层大小的内容)、scroll(无论内容是否超出层大小都添加滚动条)、auto(超出时自动添加滚动条)