1.HTML表达结构,CSS表达样式,无CSS用浏览器默认
2.背景颜色
background-color:red
background-color:#FF00FF//十六进制表示
background-color:rgb(255,255,0)//十进制表示
background-color:rgba(255,255,0,0.5)//十进制表示,a表示透明度0~1
3.背景图像,图片较小时可以重复铺满整个页面
background-image:url(图片位置)
background-repeat:no-repeat//图片不重复
background-position: right top//图片位置
background-attachment:fix//图片是否该跟着滚动
4.段落
style="text-indent:2em"缩进两个子宽度,相对值,可以为负值
style="text-indent:50%" 整行宽度的50%
style="text-indent:-2em;padding:2em" 悬挂式
style="text-indent:-2em;line-height:2" 行间距
style="text-indent:-2em;text-aline:left;word-spacing=30px" 左对齐;单词之间的空格对英文有用
style="text-indent:-2em;text-aline:left;letter-spacing=30px" 汉子之间的空格大小
style="text-indent:-2em;text-transform:capitalize" 对字母大小写的变化,首字母大写
style="text-decoration:underline overline line-through" 对文字画线
style="white-space:pre/normal/pre-wrap/pre-line" //默认你的空格回车/正常/随浏览器大小变化(卷绕)/保留换行
style=“deraction:rtl” /文字书写方式
5.字体
style=“front-family:serif sans-serif monospace cursive fantasy ” //五个字体大类
style=“font-style:italic obique ” //倾斜、
style=“font-variant:small-caps ” //小的大写
style=“font-weight:400 ” //加粗
style=“font-size:10em” //字体变大变小,放大十倍
6.文本样式:效果
style=“text-shadow:3px 5px 5px rgba(255,255,255,0.5)” //加阴影,距离x,y,范围和颜色
style=“outline-color:red;outline-style:solid;outline-width:10” //边框颜色,线形,粗细
7.列表和表格:样式
style=“list-style-type:square” //列表前面的标记形状
style=“list-style-image:url(路径)” //可以贴图片作为标记形状
style=“list-style-position:inside/outside” //换行时文字和原点前./后对齐
8.表格
style=“border:1px solid blue” //边框的宽
style=“border-collapse:collapse” //两条线合并成一条线
style=“vertical-align:top;text-align:right” //里面汉字的位置
style=“padding:10 15 20 25” //与边界的距离,上,右,下,左
style=“caption-side:bottom” //表头的位置
style="table-layout:automatic/fixed" //读入表的全部内容,自动分析列,行的宽度/由第一列的宽度确定其他行宽度
9.框模型
style=“padding:10 15 20 25” //与边界的距离,上,右,下,左
style=“padding:10 ” //与四周边界的距离
style=“padding-top:10 ” //与上边边界的距离
style="margin:50px" //与浏览器边界的距离,两个相连的元素的距离取两者之间较大的
10.定位
<div> //分区</div>
body>div>p>span
style="position:relative;left:-20px" //相对位置不管其他东西,在原来位置的相对移动,原来位置相对不动
style=“position:absolute;left:-20px” //绝对定位,原来位置不见了,其他位置相应变化,外围有定位则相对外围定位,外围没有定位则相对整个浏览器的定位
style="float:right" //永远浮动定位
11.样式选择器
元素选择器:<head>里面<style>规定
p,th,td {border:1px solid blue} //相同样式的可以放在一起
p {backgroud-color:red} //可以另外再规定,或的关系
类选择器
*.important{color:red} //自定义了一个类
<p class="important:>
</p>
*#important{color:red}
<p id="important">
</p>
属性选择器 //对于所有有该属性的样式
*[title] {color:red}
后代选择器 //只有p里面的em才会遵循样式,可以有很多层次
p em {color:red} //此处是空格表示层次之间不需要紧紧挨着
p > em {color:red} //此处是大于号表示层次之间需要紧紧挨着,否则样式不起作用
p + em {color:red} //此处是相连的层次之间需要紧紧挨着,否则样式不起作用
尾类和超链接类
a:visited{color:#FF0000}