核心提示：CSS基础知识1、css概念css（cascading style sheet）层叠式样式表。概念包括：层叠式，样式。2、css作用前端3层：1html 结构层。2css 样式层3Javascript...
CSS基础知识
1、css概念 css（cascading style sheet）层叠式样式表。 概念包括：层叠式，样式。 2、css作用 前端3层： 1html 结构层。 2css 样式层 3Javascript 行为层 css涉及2个部分：选择器（给某个元素或标签设置样式），样式属性（想给选择器添加什么属性就设置什么样式） 1 p{ 2 width:300px; 3 height:300px; 4 background-color:pink; 5 font-size:20px; 6 font-family:"Microsoft Yahei"; 7 color:black; 8 } css的作用： 1）盒子实体化，进行页面布局。 2）设置文字样式。 3、css一些样式 1 p{ 2 /*实体化盒子*/ 3 width:300px; 4 height:300px; 5 background-color:pink; 6 border:1px solid black; 7 font-size:20px; 8 font-family:"Microsoft Yahei"; 9 color:black; 10 } ①实体化盒子： width:宽度，单位像素（px）； height：高度，单位像素（px）; background-color:背景颜色。 色值表示法： 1十六进制表示法： #ff0000; 2rgb表示法： rgb(255,0,0); 3单词表示法： red; 十进制：0-9 十六进制：0-9, a: 10 b: 11 c: 12 d: 13 e: 14 f: 15 1ff= 15*16 + 15 = 255 background是复合属性。 单一属性，单词间用横线连接。 border:1px solid #ffff00; 线的宽度:1px 线的类型：solid实线，dashed（虚线），dotted(点线) 线的颜色：#ffff00; ②文字样式： color:设置文字的颜色。用色值表示法。 1color:#ff0000; //红色 font-size:设置字号。单位是像素px。 1font-size:20px; font，是复合属性，其中的单一属性用短横连接。 font-family:设置字体。 1font-family:"微软雅黑"; 字体：中文字体，英文字体。 英文字体：黑体，Arial。 中文字体：微软雅黑，宋体。 注意：1）我们设置字体时，因为不同的用户，字体不一样。我们尽量用计算机自带的字体。 书写时，先英文字体，在写中文字体。以防万一，尽量写一个备用字体，宋体。 2）在书写时可以写中文，但是想提高加载速度，需要中文换成英文。每个字体用逗号隔开。 1font-family:"Arial","Microsoft Yahei","SimSun"; 4、css书写位置 ①行内式：标签有一个style属性，可以把css样式写在style属性里。包括css全部属性。 但是我们行内式的样式是后台程序员添加。 1<p style="color:red;font-size:20px;">我是一个段落</p> ②内嵌式（嵌入式）:写在head标签内部，一个style标签里。 1<head> 2 <styletype="text/css"> 3 p{ 4 width:400px; 5 height:400px; 6 background-color:pink; 7 border:1px solid #ddd; 8 } 9 h3{ 10 font-size:50px; 11 color:green; 12 } 13 </style> 14</head> style标签有一个type属性。属性值“text/css”表示style标签内部书写的是纯文本的css样式。 type属性可以不写，但是要写就必须写对。 ③外链式。实战课会说。 5、css杂项 html中键值对的写法：k=”v”。 css中键值对的写法：k:v; css中分号的重要性：每条样式中间用分号分割；每个样式要逐条书写。有什么属性就写样式。 1 width:400px; 2 height:400px; 3 background-color:pink; 4 border:1px solid #ddd; css中，对空格，缩进，换行不敏感。 要求大家，css代码逐条书写，为了提高代码可读性。 四、选择器 1、基础选择器 选择器：设置html元素或者html标签的样式。 1）标签选择器 标签名是什么就写什么。前面不要任何符号。 标签选择器特点：能够选中页面上所有同种标签，不管嵌套多少层都可以被选中。（不太常用） 1 <p> 2 <p> 3 <p> 4 <p> 5 <p>我是好深深段落</p> 6 </p> 7 </p> 8 </p> 9 </p> 用途：清空我们默认样式，或者是重置默认样式。 1 ul{ 2 /*去掉小圆点*/ 3 list-style:none; 4 } 5 body{ 6 background-color:#eee; 7 } 8 2）id选择器 通过标签的id属性，进行设置。 书写方法：#id名。#和id名之间不要加空格。 1 #pa{ 2 font-size:30px; 3 } 注意：①任何一个标签的id名是唯一。即使是不同的标签也不能用相同的id名。 ②id名的命名规则：以字母开头可以有数字、下划线、横线符号。 层叠性体现1：同一元素既有标签设置，同时又有id设置，这些属性都会体现这个元素上。 p{ color:red; } #pa{ font-size:30px; } <p id="pa">这是一些段落</p> 标签选择器能够选中页面上所有的同种标签。 id选择器又只能选中一个元素也不好用。 3）类选择器 类选择器：通过元素上面的class属性的值可以选中相同类名的所有标签元素。这是我们实际工作中常用的选择器。 写法：.类名 类名命名规则：和id名命名相同，以字母开头，可以下划线，横线，数字。严格区分大小写。 1<pclass="warning">这是一些段落warning</p> 特殊应用：原子类。通常页面会设置一些原子类（公共类），原子类的属性尽可能少。 1 .fs20{ 2 font-size:20px; 3 } 4 .fs22{ 5 font-size:22px; 6 } 7 .red{ 8 color:red; 9 } 10 .green{ 11 color:green; 12 } 一个元素可以有多个类名，类名之间用空格隔开。 1 <p class="fs20 green">这是一些段落green</p> 类上样式，id上行为。 4）通配符 通配符：*，能够选中页面上所有的元素，包括body. 1 *{ 2 padding:0; 3 margin:0; 4 font-size:30px; 5 color:#333; 6 } 作用：清除默认样式。 但是实际工作不用，因为通配符的效率不高。 2、高级选择器 高级选择器就是基础选择器上进行延伸。 1）后代选择器 通过有嵌套关系的类选择器或者标签选择器，确认一个大范围，在大范围内进行选择，可以再选择。 写法：用空格隔开每一层。 1 pp{ 2 color:yellow; 3 } 在style标签里设置一段css样式, 1.box p{ 2color:orange; 3} 下面这段代码可以被选中。后代选择器不但能够选够选中儿子还能选中孙子，曾孙子...... 1 <p class="box"> 2 <p> 3 <p>我是超微有点靠里的p</p> 4 <p>我是超微有点靠里的p</p> 5 <p>我是超微有点靠里的p</p> 6 </p> 7 </p> 后代选择器可以简写，也可以补全。无论如何必须相对应的嵌套关系。 1 p .box p{//补全写法 2 color:red; 3 } 4 p p{ 5 color:red; 6 } 1 <p> 2 <p class="box"> 3 <p>文字</p> 4 <p>文字</p> 5 <p>文字</p> 6 </p> 7 </p>
