css

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}

 

posted @ 2017-09-26 16:44  小雪SS  阅读(238)  评论(0编辑  收藏  举报