第三章 使用CSS技术美化
2016-04-23 22:26
267 查看
1、CSS样式中的选择器严格区分大小写，属性和值不区分大小写。
2、引入css样式表
（1）行内式（内联样式）通过标记的style属性来设置元素的样式
<标记名 style=" "> 内容</标记名>
（2）内嵌式：写在<head>头部标记中，并且用<style>标记定义。
<style type="text/css"> 选择器 {}</style>
只对其所在的html页面有效。
（3）链入式：将所有的样式放在一个或多个以“.css”为扩展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到文档中。<link href="css文件的路径" type="text/css" rel="stylesheet(样式表文件)"/>
3、css基础选择器
（1）标记选择器：优点 能快速为页面中同类型的标记统一样式。
（2）类选择器：优势可以为元素对象定义单独或相同的样式。
类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。
（3）id选择器：用”#“进行标识，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
id选择器不支持像类选择器那样定义多个值。
4、*｛｝对所有html标记都生效。
5、font-weight:字体粗细 normal：默认值 bold：粗体 bolder：更粗 lighter：更细
font-variant：变体 normal：默认值 small-caps：所有的小写均会转换为大写字母。
font-style：字体风格 normal: italic：倾斜 oblique：倾斜
6、font：综合设置字体样式
选择器{font: font-style font-variant font-weight font-size/line-height font-family;}
7、css文本外观属性
color：文本颜色
letter-spacing：字间距
word-spacing：单词距
line-height：行间距
text-transform：文本转换 capitalize:首字母大写 uppercase：全部字符转换大写 lowercase：转换为小写
text-decoration：文本装饰 none：没有装饰 underline：下画线 overline：上画线 line-through：删除线
8、text-align：水平对齐方式
left：左对齐（默认） right：右对齐 center：居中对齐
9、text-indent：首行缩进（使用em作为设置单元）
仅适用于块级元素，对行内元素无效。
10、white-space：空白符处理
normal：默认，文本中的空格，空行无效，满行（到达区域边界）后自动换行
pre：预格式化，按文档的书写格式保留空格，空行原样显示。
nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记<br/>.内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。
11、标签指定式选择器（交集选择器）
由两个选择器构成，第一个为标记选择器，第二个为class选择器或id选择器。
12、后代选择器：用来选择元素或元素的后代 （如 p strong）
13、并集选择器：各个选择器通过用逗号链接而成，任何选择器都可以作为并集选择器的一部分。
14、css层叠性与继承性
不具有继承性的(边框、外边距、内边距、背景、定位、布局、元素宽高属性)
注：当为body元素设置字号属性时，标题文本不会采用这个样式。
15、css优先级
注：（1）继承样式的权重为0。
<p id="header" class="blue"> <strong>继承性</strong> </p>
strong{ color:red; } #header{ color:green;}
虽然#header具有权重100，但被strong继承是权重为0，所以页面的文本显示红色。
（2）行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。
（3）权重相同时，CSS遵循就近原则，靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
内嵌样式优先，这是因为内嵌样式比链入的外部文档更靠近。
16、复合选择器的权重无论为多少个标记选择器的叠加，其权重都不会高于类选择器。
同理无论多少类选择器和标记选择器的叠加，权重都不会高于id选择器。
2、引入css样式表
（1）行内式（内联样式）通过标记的style属性来设置元素的样式
<标记名 style=" "> 内容</标记名>
（2）内嵌式：写在<head>头部标记中，并且用<style>标记定义。
<style type="text/css"> 选择器 {}</style>
只对其所在的html页面有效。
（3）链入式：将所有的样式放在一个或多个以“.css”为扩展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到文档中。<link href="css文件的路径" type="text/css" rel="stylesheet(样式表文件)"/>
3、css基础选择器
（1）标记选择器：优点 能快速为页面中同类型的标记统一样式。
（2）类选择器：优势可以为元素对象定义单独或相同的样式。
类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。
（3）id选择器：用”#“进行标识，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
id选择器不支持像类选择器那样定义多个值。
4、*｛｝对所有html标记都生效。
5、font-weight:字体粗细 normal：默认值 bold：粗体 bolder：更粗 lighter：更细
font-variant：变体 normal：默认值 small-caps：所有的小写均会转换为大写字母。
font-style：字体风格 normal: italic：倾斜 oblique：倾斜
6、font：综合设置字体样式
选择器{font: font-style font-variant font-weight font-size/line-height font-family;}
7、css文本外观属性
color：文本颜色
letter-spacing：字间距
word-spacing：单词距
line-height：行间距
text-transform：文本转换 capitalize:首字母大写 uppercase：全部字符转换大写 lowercase：转换为小写
text-decoration：文本装饰 none：没有装饰 underline：下画线 overline：上画线 line-through：删除线
8、text-align：水平对齐方式
left：左对齐（默认） right：右对齐 center：居中对齐
9、text-indent：首行缩进（使用em作为设置单元）
仅适用于块级元素，对行内元素无效。
10、white-space：空白符处理
normal：默认，文本中的空格，空行无效，满行（到达区域边界）后自动换行
pre：预格式化，按文档的书写格式保留空格，空行原样显示。
nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记<br/>.内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。
11、标签指定式选择器（交集选择器）
由两个选择器构成，第一个为标记选择器，第二个为class选择器或id选择器。
12、后代选择器：用来选择元素或元素的后代 （如 p strong）
13、并集选择器：各个选择器通过用逗号链接而成，任何选择器都可以作为并集选择器的一部分。
14、css层叠性与继承性
不具有继承性的(边框、外边距、内边距、背景、定位、布局、元素宽高属性)
注：当为body元素设置字号属性时，标题文本不会采用这个样式。
15、css优先级
注：（1）继承样式的权重为0。
<p id="header" class="blue"> <strong>继承性</strong> </p>
strong{ color:red; } #header{ color:green;}
虽然#header具有权重100，但被strong继承是权重为0，所以页面的文本显示红色。
（2）行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。
（3）权重相同时，CSS遵循就近原则，靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
内嵌样式优先，这是因为内嵌样式比链入的外部文档更靠近。
16、复合选择器的权重无论为多少个标记选择器的叠加，其权重都不会高于类选择器。
同理无论多少类选择器和标记选择器的叠加，权重都不会高于id选择器。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐