CSS的学习和应用
1,css的层叠样式
内联样式表:写在开始标签中,在html元素内部 <div style=“color red”>名称</div>
内部样式表:写在网页的<head>部分(只能让那个作用于本网页) <head> <style type="text/css"> 样式的定义 <style> <head>
外部样式表:引用在网页的<head>部分,使用<link>标记引入代码 <head> <link rel ="stylesheet" type="text/css"> href="样式表的css文件" <head> 优先级:内联>内部=外部(位置决定) 2,css的文本
缩进文本:text-inden 属性 单位(em)前面接数字 p {text-indent: 5em;} 水平对齐:text-aligh (left,right,center) 将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。 字符转换:text-transform(uppercase,lowercase) h1 {text-transform: uppercase} 文本装饰: text-decoration(underline下划线 overline上划线 line-through贯穿线) a {text-decoration: none;} a:link a:visited {text-decoration: underline overline;} 背景: size(大小,接数值)color(颜色)tansparent(透明) repeat img(后接图片 url) 字间隔 : word-spacing p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;}
<p class="spread"> This is a paragraph. The spaces between words will be increased. </p>
<p class="tight"> This is a paragraph. The spaces between words will be decreased. </p> 字母间隔:letter-spacing h1 {letter-spacing: -0.5em} h4 {letter-spacing: 20px}
<h1>This is header 1</h1> <h4>This is header 4</h4>
ul-li去掉圆点,ol—li去掉前面数字: list-style:none 背景的重复:background-repeat
3,css的字体
字体的属性:font-family body {font-family: sans-serif;} 字体的风格:font-style: normal - 文本正常显示 italic - 文本斜体显示 oblique - 文本倾斜显示 eg: p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} 字体大小:font-size: eg:h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;}
4,元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。 html {color:black;} h1 {color:blue;} h2 {color:silver;} 子元素选择器(Child selector): h1 > strong {color:red;} 相邻兄弟选择器: h1 + p {margin-top:50px;} 伪类 selector : pseudo-class {property: value} 伪元素 :first-letter 向文本的第一个字母添加特殊样式。 :first-line 向文本的首行添加特殊样式。 :before 在元素之前添加内容。 :after 在元素之后添加内容。