CSS描述了网页布局 引入CSS样式表 行内式 (在body标签内)（初学者常用）
<标记名 style=“属性值1:属性值;… ;属性值n：属性值”>内容</标记名>
缺点:只能在某标签中使用一次，样式规则少
2.内嵌式(在head标签内)（初学者常用）
< head>
? < style type=“text/css”>
? 选择器{ 属性1：属性值1；…；属性n：属性值n}
? < /style>
< /head>
缺点：若网站只有一个页面，比较好用，否则不能发挥CSS重用的优势
3.链入式（开发常用）(在head标签内)
< head> < link href="CSS文件路径"type="text/css"rel="stylesheet"/> < /head>优点：一个CSS样式可被若干个HTML页面使用，一个页面可以使用若干个CSS样式表
CSS基础选择器选择器概念：
要想将CSS样式应用于特定的HTML元素，首先要找到该目标元素执行这一任务的样式规则部分称为选择器
标记选择器标记名{属性n：属性值n；}
?
HTML所有标签都适用
?
优点：快速为页面中所有同类型的标记统一样式
?
缺点：无法差异化样式
类选择器.类名{属性n：属性值n；}
?
类名为HTML元素的class属性值，大多数HTML元素都可以定义class属性
?
优点：可以为元素对象定义单独或者相同的样式
?
<head> <style type="text/css"> .green{color:green;} </style> <body> <p class="green">文本</p> </body> </head>(“文本” 为绿色字体)
提示：p中可以放入若干个class属性
id选择器 <head> <style type="text/css"> #+id名{属性n：属性值n；} </style> <body> <标签 id="id名">文本</标签> </body> </head>?
通配选择器作用到所有HTML标记，降低代码的执行速度，作用范围最广，但开发不常用
*{属性：属性值；}
标签指定式选择器由两个选择器构成，第一个为标记选择器，第二个为class/id选择器
后代选择器元素1 元素2{样式声明}
理解：选择元素1中的所有的元素2，修改元素1标签中的元素2标签(元素2可以嵌套别的标签)
?
<head> <style type="text/css"> p strong{color:red;} strong{color:blue;} </style> <body> <p>文本<strong>文本</strong></p> <!--显示红色--> <strong> 文本 </strong> <!--显示蓝色--> </body> </head> 并集选择器 (重要) (各个选择器通过逗号连接而成的集体声明)如
<head> <style type="text/css"> h2,h3,p{color: red;font-size: 14px;} h3,special,#one{text-decoration: underline;} </style> <body> <p class="special">段落文本1加下划线</p> <p id="one">段落文本2加下划线</p> </body> </head> 文本样式属性 字号大小font-size：字号大小； (可用相对/绝对 长度单位)
常用字体有：宋体，微软雅黑，黑体
font-family：字体；
特别的：1.各种字体之间需要用英文逗号隔开
? 2.中文字体需加英文引号，英文字体不用加，当要设置英文字体时，英文字体需在中文字体之前
? 例如
选择器{ font-family:Arial,"宋体"，"黑体"; }? （用户若没有安装Arial，则会选择宋体，若无则黑体）
? 3.若字体名中包含空格，#，￥等符号，该字体需加英文引号
? 4.系统有默认字体
字体粗细font-weight：字体粗细；
normal：默认值
italic：斜体 (有倾斜属性则会倾斜)
oblique：倾斜 (有无倾斜属性都会倾斜)
综合设置字体样式 选择器{ font：font-style font-weight font-size/line-height font-family ; }如
选择器{ font: italic small-caps bold 30px/40px Arial ; } 选择器{ font-style:italic; font-variant: small-caps; font-weight :bold; font-size:30px; line-height: 40px; font-family: Arial ; }二者等价
定义服务器字体通过该属性开发者可以在用户计算机未安装字体时使用任何喜欢的字体
@font-face{ font-family: 字体名称; src:字体路径； } 自动换行用于实现长单词和url地址的自动换行
选择器{word-wrap: 属性值;}解释：如果框内一行溢出了，可以用break-word 进行换行
颜色 color:文本颜色;用于定义文本颜色
推荐好用的软件：FastStone
可以用于找到颜色，测量像素
字/字母间距letter-spacing:间距值;
允许用负值(重叠)
单词间距word-spaceing：间距值
行间距line-height:间距值
间距常用属性值：像素px，相对值em，百分比%
字符大小写转换text-transform:属性值
text-decoration:属性值
text-align:属性值
text-indent:属性值
属性值为px或者em
(适用于块级元素，对行内元素无效)
空白符处理white-space:属性值
text-shadow:属性值
选择器{text-shadow:h-shadow v-shadow blur color;}
如:text-shadow:2px 3px 3px red;
(当h-shadow，v-shadow为负值时改变阴影的投射方向)
同时如果想设置一个花里胡哨的叠加阴影可以这样设置多组阴影参数
如：text-shadow:2px 3px 3px red,2px 3px 3px green;
这样的话，红色和绿色阴影叠加
标示对象内溢出文本选择器:{text-overflow:属性值}
(CSS自定义了一个 !important命令赋予其最大优先级)
CSS的层叠性多个CSS样式可以叠加
如：<p class="special1"id="special2">文本内容</p>
CSS的继承性继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素(后代亦可)可以继承父元素的属性
如：p,div,h1,h2,h3,h4,ul,ol,dl{color: black;}
可以写成：body{color:black;}
但是并不是所有的样式都可以被继承a标签的字体颜色、下划线不能被继承
<a href="http://baidu.com">超链接</a> <a href="#">回到最顶端</a> <a href="css">文件链接</a>h标签的文字大小不能被继承
h标签分为 h1-h6
此外还有：边框、外/内边距、背景、定义、布局、元素宽/高，这些属性不具备继承性
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #css3全部标签 #style属性值1属性值 #headampgtamplt #style
