02-CSS基本样式和元素选择器

CSS基本样式和元素选择器

css的引用方式有3种：1.行内样式表（临时），2.内部样式表（练习），3.外部样式表（项目）。
选择器：标签选择器、类选择器、多类名选择器、id选择器。
① 尺寸样式，设置宽高：宽width 高height。
② 位置样式：水平位置，水平位置。
复合写法：1. 四个参数：上 右 下 左 ；2. 三个参数：上 左右 下；3. 两个参数：上下 左右；4.一个参数：四个方向距离一致
颜色值三种写法：1.颜色的单词；2.rgb(0-255,0-255,0-255)；3.十六进制数，三位或六位。

这是css的注释语法
快捷键: Ctrl+/ 注释一行 Ctrl+shift+/ 注释多行 */

rel=“stylesheet” 声明这是一个样式文件

URL(Uniform Resource Locator) 统一资源定位符。结构：模式（或称协议）+ 服务器名称（IP地址）、路径和文件名。 css的引用方式有3种：1.行内样式表（临时），2.内部样式表（练习），3.外部样式表（项目）。

<!-- color:red: 文本颜色 -->
<!-- 只针对当前标签生效，写重复样式就会很影响效率 -->
<div style="color:blue;">天青色等烟雨，而我在等你。</div>

<!-- 此样式表只应用于当前文档 -->
<h1>不是风动，不是幡动，仁者心动。</h1>

选择器：标签选择器、类选择器、多类名选择器、id选择器。
标签选择器：h1-h6，div，span，p，ul，li，ol，dl，a，img等等
类选择器：在标签中添加一个属性，class=“类名”，理解为：取的别名
多类名选择器：

虞姬

id选择器和类选择器区别：
① W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
② 类选择器，好比人的名字，是可以多次重复使用的，比如张伟、王伟、李伟、李娜。
③ id选择器，好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。
④ 为避免代码出现冲突，大骨架用id命名，里面的小结构用class。

CSS命名规范：
① 必须以字母开头命名选择器，这样可保证在所有浏览器下都能兼容；
② 不允许单个字母的类选择器出现；
③ 不允许命名带有广告等英文的单词，例如ad、adv、adver、advertising，以防止该模块被浏览器当成垃圾广告过滤掉；
④ 一律小写；
⑤ 尽量用英文；
⑥ 不加中杠和下划线；
⑦ 尽量不缩写，除非一看就明白的单词。
PS：PPT中有相关文件。

/* ① 尺寸样式，设置宽高：宽width 高height */
		width: 800px;
		height: 100px;

		/* ② 位置样式 */
		/* 水平位置 */
		margin-left: 30px;
		margin-right: 20px;
		/* 垂直位置 */
		margin-top: 50px;
		margin-bottom: 20px;
		/* 复合写法 */
		/* 四个参数：上 右 下 左 */
		margin: 50px 20px 20px 30px;
		/* 两个参数：上下 左右 */
		margin: 20px 30px;
		/* 一个参数：四个方向距离一致 */
		margin: 50px;
		/* 清除默认边距 */
		margin: 0;

		/* ③ 背景颜色 */
		/* 颜色值三种写法：
		   1.颜色的单词；
		   2.rgb(0-255,0-255,0-255)；
		   3.十六进制数，三位或六位。*/
		background-color: yellow;

		/* ④ 文字样式 */
		/* 文字大小，浏览器默认渲染14px */
		font-size: 20px;
		/* 文字字体 */
		font-family: SimSun;
		/* 文字颜色，颜色写法和背景颜色一致 */
		color: green;

1、网页字体样式华文黑体：STHeiti

2、网页字体样式华文楷体：STKaiti

3、网页字体样式华文宋体：STSong

4、网页字体样式华文仿宋：STFangsong

5、网页字体样式黑体：SimHei

6、网页字体样式宋体：SimSun
7、网页字体样式新宋体：NSimSun

8、网页字体样式仿宋：FangSong

9、网页字体样式楷体：KaiTi

10、网页字体样式仿宋_GB2312：FangSong_GB2312

11、网页字体样式楷体_GB2312：KaiTi_GB2312

12、网页字体样式微软正黑体：Microsoft JhengHei

13、网页字体样式微软雅黑体：Microsoft YaHei

14、网页字体样式隶书：LiSu

15、网页字体样式幼圆：YouYuan