CSS基础知识

来源：互联网发布：淘宝买迷你睡莲哪家好编辑：程序博客网时间：2024/06/07 09:40

1、css概念

css（cascading style sheet）层叠式样式表。

概念包括：层叠式，样式。

2、css作用

前端3层：

1 html 结构层。

2 css 样式层

3 Javascript 行为层

css涉及2个部分：选择器（给某个元素或标签设置样式），样式属性（想给选择器添加什么属性就设置什么样式）

1 div{

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 div{

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;

2 rgb表示法： rgb(255,0,0);

3 单词表示法： red;

十进制：0-9

十六进制：0-9,

a: 10

b: 11

c: 12

d: 13

e: 14

f: 15

1 ff= 15*16 + 15 = 255

background是复合属性。

单一属性，单词间用横线连接。

border:1px solid #ffff00;

线的宽度:1px

线的类型：solid实线，dashed（虚线），dotted(点线)

线的颜色：#ffff00;

②文字样式：

color:设置文字的颜色。用色值表示法。

1 color:#ff0000; //红色

font-size:设置字号。单位是像素px。

1 font-size:20px;

font，是复合属性，其中的单一属性用短横连接。

font-family:设置字体。

1 font-family:"微软雅黑";

字体：中文字体，英文字体。

英文字体：黑体，Arial。

中文字体：微软雅黑，宋体。

注意：1）我们设置字体时，因为不同的用户，字体不一样。我们尽量用计算机自带的字体。

书写时，先英文字体，在写中文字体。以防万一，尽量写一个备用字体，宋体。

2）在书写时可以写中文，但是想提高加载速度，需要中文换成英文。每个字体用逗号隔开。

1 font-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 <style type="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 <div>

2 <div>

3 <div>

4 <div>

5 <p>我是好深深段落</p>

6 </div>

7 </div>

8 </div>

9 </div>

用途：清空我们默认样式，或者是重置默认样式。

1 ul{

2 /*去掉小圆点*/

3 list-style:none;

4 }

5 body{

6 background-color:#eee;

7 }

2）id选择器

通过标签的id属性，进行设置。

书写方法：#id名。#和id名之间不要加空格。

1 #pa{

2 font-size:30px;

3 }

注意：①任何一个标签的id名是唯一。即使是不同的标签也不能用相同的id名。

②id名的命名规则：以字母开头可以有数字、下划线、横线符号。

层叠性体现1：同一元素既有标签设置，同时又有id设置，这些属性都会体现这个元素上。

color:red;

}

#pa{

font-size:30px;

}

<p id="pa">这是一些段落</p>

标签选择器能够选中页面上所有的同种标签。

id选择器又只能选中一个元素也不好用。

3）类选择器

类选择器：通过元素上面的class属性的值可以选中相同类名的所有标签元素。这是我们实际工作中常用的选择器。

写法：.类名

类名命名规则：和id名命名相同，以字母开头，可以下划线，横线，数字。严格区分大小写。

1 <p class="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 div p{

2 color:yellow;

3 }

在style标签里设置一段css样式,

1 .box p{

2 color:orange;

3 }

下面这段代码可以被选中。后代选择器不但能够选够选中儿子还能选中孙子，曾孙子......

1 <div class="box">

2 <div>

3 <p>我是超微有点靠里的p</p>

4 <p>我是超微有点靠里的p</p>

5 <p>我是超微有点靠里的p</p>

6 </div>

7 </div>

后代选择器可以简写，也可以补全。无论如何必须相对应的嵌套关系。

1 div .box p{ //补全写法

2 color:red;

3 }

4 div p{

5 color:red;

6 }

1 <div>

2 <div class="box">

3 <p>文字</p>

4 <p>文字</p>

5 <p>文字</p>

6 </div>

7 </div>

阅读全文

0 0