css笔记详解（1）

2年前 (2022) 程序员胖胖胖虎阿

304 0 0

css讲解

首先在我们学习css之前先来思考一个问题，为什么html标签上不直接改变样式，而要将文档结构和样式分离，分别用html和css来表示呢?

其实我个人认为这样分离带来的好处明显，我总结了几点：

1. 可以实现样式重用，提高了工作效率。

2. 可以更加细致的分工开发。

3. 使文件结构变的更加清晰。

1:css语法

CSS规则由两个主要的部分构成：选择器以及一条或多条声明，即：选择器{属性:值;属性:值;…. }

请注意：

将所有声明放到{ }中

每条声明由三部分组成——属性:值

声明以;结束

2：css常见属性

字符颜色	color:red;
字号大小	font-size:40px;
背景颜色	background-color:blue;
宽度	Width:10px;
长度	Height:40px;
背景图片	background-image:url(“1.png”);
文字居中	text-align:center;left\|right;
行高	line-height
加粗	font-weight:bold;
不加粗	font-weight:normal;
斜体	font-style:italic;
不斜体	font-style:normal;
下划线	text-decoration:underline;
没有下划线	text-decoration:normal
首行缩进	Text-indent：2em;

在使用background-image属性时请注意：一定要设置其宽和高，例如：

width: 50px;

height: 90px;

background-image: url("x.jpg");

还有之前在html中标签设置背景图片使用：background，同时可以不用放在style中，而这里css是background-image；注意区分。

同时要知道：浏览器默认文字大小为16px，默认行高(line-height)为18px

3：css写法

在这里写3中常见的css写法：

（1）第一种：内嵌式写法

1 1 <head>
2 2     <style type="text/css"> 
3 3     /*此处为CSS代码----在该写法中，可以将CSS样式写在<head></head>标签中*/
4 4     </style>
5 5 </head>

（2）第二种：外链式写法

与内嵌式写法中直接把CSS写在了<head></head>中不同，在外嵌式写法中是把CSS写在了专门的.css文件里，然后在html中通过<link>标签引用就可以了，请看如下示例：

1 <head>
2    <link rel="stylesheet" type="text/css" href="csstest.css" />  /*在实际开发中，这种运用最多，因为可以降低后期的维护性成本*/
3 </head>

（3）第三种：行内式写法，这种写法作用范围相对小，但优先级最高，具体后面讲

1 <body>
2     <p style="color:blue; font-size:40px">欢迎访问蜗牛的博客。</p>
3 </body>

CSS选择器

CSS常见选择器的分类:

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

复合选择器

并集选择器

后迭代选择器

交集选择器

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4          <style type="text/css">
 5          
 6           p{
 7             color: red;
 8             background-color: pink;
 9           }
10            .testclass{
11             color: red;
12             background-color: white;
13           }
14           
15            #testid{
16             color: red;
17             background-color:green;
18           } 
19           
20         </style>
21 </head>
22 <body>
23     <p>我是标签选择器</p>   <!--标签选择器只要把标签名放前面就好，也可以同时放多个-->
24     <h4 class="testclass">我是类选择器</h4>  <!--类选择器签名前面加一点在取一个名字-->
25     <h4 id="testid">我是id选择器>            <!--id选择器前面加#在取一个名字-->
26     <h4>我什么都不是</h4>
27 </body>
28 </html>

演示效果：

css笔记详解（1）

注意：

id选择与类选择器不同的是：一个标签只能调用一个ID选择器。虽然多个标签可以使用同一ID选择器，但是强烈不建议这么做，如果出现多个标签id相同的情况下，那么当你用js获得属性的时候，往往只能获得第一个。所以，在实际开发中极少采用ID选择器而多用类选择器。

通配符选择器：

通配符使用星号*表示，意思是“所有的”

*{
    padding:0;
    margin:0;
}

这里是设置所有元素的外边距margin和内边距padding都为0。

不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器，取而代之的是，把所有需要统一设置的元素，放在一起，一块设置。

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{ margin:0;padding:0}

复合选择器

并集选择器：

 1 <!DOCTYPE html>
 2 <head>
 3 <title>并集选择器</title>
 4 </head>
 5   <style type="text/css">
 6      h4,span{
 7         color:red;
 8      }
 9   </style>
10 <body>
11     <h4>我是h4标签</h4>   
12     <span>我是span标签</span>
13 </body
14 </html>

运行结果如下：

css笔记详解（1）

后迭代选择器：

特点：向后面迭代选择（向子标签)

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>后迭代选择器</title>        
 5     </head>
 6         <style type="text/css">   
 7            .testdiv span{      
 8           color:green;
 9            }
10        </style>
11    <body>
12         <div class="testdiv">
13             <p>我是p标签</p>
14             <span>子标签（孙子）</span> <!--表面该css只对class为testdiv中嵌套的span标签起作用-->
15        </div>
16    </body
17 ></html>

运行结果如下：

css笔记详解（1）

交集选择器

交集选择器一般是以标签选择开头，类选择器结尾

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>交集选择器</title>        
 5     </head>
 6      <style type="text/css">
 7     div span.redspan{
 8         color:red;
 9     }
10    </style>
11 <body>
12     <div>
13         <span>span1</span><br>
14         <span class="redspan">sapn2</span><br> <!--只对这个有效果-->
15         <span>span3</span><br>
16     </div>
17 </body>
18 </html>