样式表
内部样式表
嵌入样式就是将CSS代码写在HTML文档的head-back标签中，并用style标签进行定义。 其基本句型如下：
<head>
<style type="text/CSS"><span class="token style language-css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
总结：
在语法上，style标签通常位于head标签中的title标签之后，但它也可以放置在HTML文档中的任何位置。 type="text/CSS" 在html5中可以省略
内联样式（inline style）
基本句子格式如下：
内容
外部样式表（外部链接类型）
链接方法将所有样式放置在一个或多个扩展名为.CSS 的外部样式表文件中，并通过link 标记将外部样式表文件链接到HTML 文档。 基本句子格式如下： 注：link是单个标签。 在这个句型中，需要将link标签放在head的back标签中，并且必须指定link标签的三个属性，如下： href：定义链接的外部样式表文件的URL，可以是相对路径或绝对路径。 。 type：定义链接文档的类型，这里需要指定为“text/CSS”，表示链接的外部文件是CSS样式表。 rel：定义当前文档和链接文档之间的关系。 这里需要指定为“stylesheet”，表示链接的文档是样式表文件。 CSS 字体样式属性
font-size：字体大小单位通常使用像素px
font-family：Font可以同时指定多种字体，用冒号分隔，这意味着如果浏览器不支持第一种字体，就会尝试下一种，直到找到合适的字体。
font-weight：字体粗细及其可用属性值：
正常、加粗、加粗、加粗、100~900（100的整数倍）。
字体样式：字体样式
font-style属性用于定义字体样式，例如设置斜体、斜体或普通字体。 其可用的属性值如下：
正常：默认值css目的，浏览器将显示标准字体样式。
斜体：浏览器将显示粗体字体样式。
oblique：浏览器将显示倾斜字体样式。
字体：全面设置字体样式
font属性用于综合设置字体样式。 其基本句型如下：
选择器 {font: font-style font-weight font-size/line-height font-family;}
CSS 外观属性
颜色：文字颜色
color 属性用于定义文本的颜色。 其取值形式如下：
预定义的颜色值，如red，green，blue等。
十六进制.
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB编码的比例颜色值，值为0时百分号不能省略，必须写成0%。
线高：线宽
text-align：水平对齐方式
text-align属性用于设置文本内容的水平对齐方式，相当于HTML中的align对齐属性。 其可用的属性值如下：
left：左对齐（默认值）
右：右对齐
center：居中对齐
文本缩进：首行缩进
text-indent 属性用于设置第一行文本的缩进。 它的属性值可以是不同单位的值、em字符间距的倍数、或者相对于浏览器窗口长度的比例%。 允许负值。 建议使用 em 作为设置单位。
文字装饰 文字装饰
text-decoration通常用于改变链接的装饰效果。
基本选择器
标签选择器（元素选择器）
标签选择器是指使用HTML标签名称作为选择器，根据标签名称进行分类，为页面中的某类标签指定统一的CSS样式。 其基本句型如下：
标签名称{属性1：属性值1； 属性2：属性值2； 属性3：属性值3； } 或者
元素名称{属性1：属性值1； 属性2：属性值2； 属性3：属性值3； }
类选择器
类选择器用“.”标记。 （英文点），后面是类名。 其基本句型如下：
.类名{属性1：属性值1； 属性2：属性值2； 属性3：属性值3； }
调用标签时只需使用 class="class name" 即可。
类选择器的优点：
可以为元素对象定义单独或相同的样式。 您可以选择一个或多个标签。
多类名选择器
我们可以为标签指定多个类名，以实现更多的选择。
注意：
样式显示的效果与HTML元素中类名的顺序无关css目的，而是与CSS样式书写的顺序有关。 用空格分隔每个类名称。
当后期布局比较复杂时，往往会用到多类别名称选择器。
亚瑟
刘备
安其拉
貂蝉
id选择器
id 选择器用“#”标记，后跟 id 名称。 其基本句型如下：
#id name {属性1：属性值1； 属性2：属性值2； 属性3：属性值3； }
id选择器和类选择器的区别
W3C规定同一页面上不允许出现同名的id对象，但允许同名的类。
通配符选择器
通配符选择器由“*”符号表示。 它的范围是所有选择器中最广的，可以匹配页面上的所有元素。 其基本句型如下：
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
发表评论