CSS入门

CSS入门

1、html与css的关系：html是负责内容和格式，css负责内容样式

2、css加入html三种方式：

        用link标签引入外部样式表；<link rel="stylesheet" type="text/css" href="bd.css">    

        head标签引入内部样式表；<style>p{background: #f00;}</style>

        在元素头标引入行内样式表；<p style="background-color:gray;">我是段落1</p>

3、css背景颜色样式：

英文名字；p{background-color:lightgray;}，默认transparent

#rrggbb;   p{background-color:#ff00ff;}

rgb(0-255,0-255,0-255); p{background-color:rgb(255,0,255);}

rgba(0-255,0-255,0-255,0-1); p{background-color:rgb(255,0,255,0.5);},alpha表示透明度

4、图片背景：

背景添加图片； p{background-image:url（img1.png）;}

背景图片重复； p{background-repeat:no-repeat;}

背景图片位置：p{background-position:100px 100px;}或者right center组合

背景图片是否跟随页面滚动：p{background-attachment:fixed;}默认是滚动scroll，该设置为不滚动

综合图片设置：p{background:color image repeat attachment position；}按照这个顺序设置

5、段落样式：

段落颜色：p{color:red;}

段落缩进: p{text-indent:2em;}em表示当前字体的倍数

段落行间距：p{line-height:2em;}

段落对齐：p{text-align:justify;}

段落字间距和段落单词间距：letter-spacing和word-spacing

段落英文变换：text-transform:capitalize/uppercase/lowercase,首字母大写/都大写、都小写

段落文字装饰：text-decoration：underline overline line-through

段落英文空格设置：white-space：pre-line，保留空白，卷绕，换行。

6、文字样式:

font-size：推荐用em单位，因为不是所有浏览器都支持固定大小px。

文本阴影：text-shadow:3px 5px 5px rgb（0,255,0,0.5），0px 1px 3px #606060；x方向 y方向 阴影模糊范围 模 糊的颜色,重复设置

文本加边框：outline-color/style/width:red/double/10;