css笔记详解

css讲解

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

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

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

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

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

1:css语法

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

请注意：

将所有声明放到{ }中

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

声明以;结束

2：css常见属性

字符颜色	color:red;
字号大小	font-size:40px;
背景颜色
宽度	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>

演示效果：

注意：

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>

运行结果如下：

后迭代选择器：

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

 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>

运行结果如下：

交集选择器

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

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>

运行结果如下：

上面这些是一些有关基础css和选择器，接下来还有许多，我会一一道来！

css块级标签，行内标签，行内块标签的转换

本文原创作者：雨点的名字
作者博客地址：https://home.cnblogs.com/u/qdhxhz/

在基础1中，我详细讲了css的常见属性，几种不同的选择器，在此基础之上我们来进一步地认识它们的特性从而更好地学习和掌握相关开发技能。

HTML标签的分类

在讲标签分类的时候，我们作为初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用，比如宽、高、水平居中等，其实这个属性的使用只有在块级标签上使用才起作用。个人认为这个也是初学者非常容易忽略的地方，所以我就把它记下来！

首先我们可以按照显示的不同将HTML标签分为：块级标签，行内标签，行内块标签；现对其分别介绍。

块级标签

特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

典型的块级标签有：<div> ，h系列，<li>，<dt>，<dd>，<p> ，<form>，<ul>

行内标签

特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！

典型的行内标签有：<span>，<a>，<b>，<i>，<u>，<em>，<strong>，<label>，<br>

行内块标签：

特点：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；

典型的行内标签有：<img>，<input>

那么有的同学就会想了，难道我就不可以控制span或者font的宽高了吗？可以的，那么我们这次抛开浮动和定位不说，就说通过display属性来将它们互相转换：

1、块级标签转换为行内标签：display:inline;

2、行内标签转换为块级标签：display:block;

3、转换为行内块标签：display：inline-block;

只要给对应的标签使用这个display这个属性，取相应的值，就可以将显示模式互相转换。

下面请看如下示例：

1：将行内标签转换为块级标签

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>行内标签转块级标签</title>
 5         <style type="text/css">
 6             a{
 7                 width: 200px;
 8                 height: 200px;
 9                 background-color: red;
10                 display: block; 
11             }
12         </style>
13     </head>
14     <body>  <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
15         <a href="https://www.baidu.com">百度</a>
16     </body> <!--而当你用display: block;代表行内标签转为块级标签-->
17 </html>

运行结果如下;点红色任意一区域都能实现跳转到百度，所以他可以实现扩大链接范围。

2：将行内标签转换为行内块标签

上面已经讲过行内块级标签和块级标签的区别，我在强调一遍：块级标签和行内块级标签都是可以设置长和宽的，但块级标记当你设置好后

它是自动换行的，你不能在这一行再放其它东西，而行内块级标签在同一行中可以放置多个行内标签，具体我有案例来解释。

 1 <html>
 2     <head>
 3         <title>块级和行内块级</title>
 4         <style type="text/css">
 5             a{
 6                 width: 100px;
 7                 height: 100px;
 8                 background-color: green;
 9                 display: inline-block;  
10             }
11             div{
12             width:100px;
13             height:100px;
14            background-color: red;
15            margin-top:10px;  /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/
16            }
17         </style>
18     </head>
19     <body>
20         <a href="https://www.baidu.com">百度</a>   <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
21         <a href="https://www.baidu.com">百度一下</a>
22         <div>我是div1</div>   <!--这个是一般的块级标签，会上下分行-->
23         <div>我是div2</div>
24     </body>
25 </html>

运行结果：

3.将块级标签转换为行内标签

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>块级标签转行内标签</title>
 5         <style type="text/css">
 6             div{
 7                 width: 100px;
 8                 height: 100px;
 9                 background-color: red;
10                 display: inline;
11             }
12         </style>
13     </head>
14     <body>
15          <div>谷歌</div>  <!--按道理div是块级可以设置长和宽当通过display: inline;它已经是行内标签了，所以长和宽失效-->
16          <div>https://www.google.com</div>
17     </body>
18 </html>

效果如下：

有关块级标签，行内标签，行内块级标签我就先写到这里，也欢迎大家看了之后能够多指点，感谢。

盒子模型

版权声明

本文原创作者：雨点的名字
作者博客地址：https://home.cnblogs.com/u/qdhxhz/

在讲理论之前，我们先要知道网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

那具体指什么含义呢，我用通俗的话来给大家解释一下：

就好比你现在网上买了一个手机华为，那么新手机肯定是放在一个盒子里给你寄来。那么这华为本身就指的是内容（content），为了让手机安全寄到会在盒子里放点泡沫这就是填充（padding），那么这个盒子本身肯定是有它的宽度的这叫边框（border），每个盒子与每个盒子之间（也可以是块与块）的距离叫边界（margin）。

下面这个图看不懂没关系，接下来我会详细讲。

我们先来看一个小案例：我设置好一个块级标签的宽度为250；

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>盒子模型</title>
 5         <style type="text/css">
 6             div{
 7                 width:250px;
 8                 padding:10px;
 9                 border:5px solid red;
10                 margin:10px;
11             }
12         </style>
13     </head>
14     <body>
15          <div>欢迎关注博客园博客：雨点的名字</div>
16     </body>
17 </html>

运行结果：下面里面那圈黑线是我自己加进去的，为的是让大家看的更加清楚padding是哪一部分。它这里总宽度就指：文字内容宽度：250;中间空白：10px(左右各10);boeder宽度:5px(左右各5)；margin：10px（左右各10），所以总共真是的宽度为300px。

因此，在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 + border宽度 + padding宽度 + margin宽度）之和。这样我们改四个中的其中一个，都会导致盒子宽度的改变。这对我们来说不友好。具体怎么解决我们晚点讲，接下来我们还是先讲属性。

1：边框(border)

border:1px solid red;

1px 是边框的粗细，red是边框的颜色，solid是边框的样式

border-width 边框宽度：一般用像素表示

border-color 颜色有：可以是英文单词；也可以是16进制（记得有#号）

border-style 样式有：dashed虚线/dotted点线/solid实线/double双线（像素跳高才明显）/hidden隐藏/groove3D 凹槽边框/ridge：3D垄状边框/inset：3D朝内边框/outset：3D朝外边框

边框的四边：

border-top:1px solid red;

border-bottom:1px solid red;

border-left:1px solid red;

border-right:1px solid red;

可以直接用border:1px solid red;表示。注意1px 和 solid 中间用空格

举个列子：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4       
 5         <title>CSS的盒子模型</title>
 6         <style type="text/css">
 7 
 8               input{         /*先统一去除表单原本的样式*/
 9                   border: none;     /*默认情况下标签的border都是none，而input标签你使用的时候发现在外面会有一圈，所以input默认是有的*/    
10                   outline-style: none;/*这个有和没有也是有差别的，具体你可以自己测试，细微不同我这里就不延伸了*/
11               }
12 
13               .username{
14                  border: 1px dashed red;
15                  background: yellowgreen;
16               }
17 
18               .username:focus{            /*这里代表当class="username"的元素，一旦获得焦点那么元素的背景色就会改变*/
19                  background-color: red;
20               }
21 
22               .email{                   
23                  border-bottom: 1px solid red;  /*这个就代表就在底部设置一条线*/
24               }
25 
26               .mobile{
27                  border:1px solid green;   
28 
29             }
30 
31         </style>
32     </head>
33     <body>
34          <label for="usernameid">用户名: </label>   <!--这里的for=“”,这个是和input的id绑定，当我们点击input前面的文本标识会自动聚焦到文本框--> 
35            <!--这个例子，当我点击用户名的时候也就相当于input获得了焦点，也就是光标会自动定位到文本框里-->
36          <input type="text" class="username" id="usernameid"> 
37          <br>
38          <br>
39          <label for="emailid">邮 箱：</label>
40          <input type="text" class="email" id="emailid">
41          <br>
42          <br>
43          <label for="mobileid">电话: </label>
44          <input type="text" class="mobile" id="mobileid">
45     </body>
46 </html

运行结果如下：

上面实现几个特点：1：用户名右边文本框得到焦点，那么背景色会自动变成红色。2：当你点击用户名焦点会到input文本框中3：邮箱中的input告诉我们为什么前面要对input标签做一个处理去掉border。

注解：border: none ：取消表单边框

outline-style:none;取消表单轮廓线

.username:focus ：直接为这个类的标签添加焦点事件，这个很有用需要大家牢记

2：填充（padding）

内容与边框之间是可以设置距离，称之为填充。其顺序为上右下左

padding:10px 20px 30px 40px;

也可以分开写

padding-top:10px;

padding-right:10px;

padding-bottom:10px;

padding-left:10px;

如果上右下左的值是一样的；可以直接写成一个

padding:10px;

如果上下；右左一样；可以写成两个

padding:10px 20px;

3：边界（margin）

它的用法和填充一样的，所以具体这里不再多说。不过有一点希望大家记住：

1：两个盒子垂直显示的时候，如果上方的盒子设置了margin-bottom: Mpx并且下方的盒子设置了 margin-top:Npx；那么两者的实际间距并不是M+N而是M、N两者的最大值。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>margin</title>
 5         <style type="text/css">
 6              div{       
 7                 margin:10px;    
 8                 }
 9         </style>
10     </head>
11     <body>
12          <div>11111</div>  
13          <div>22222</div> <!--尽管上面的margin-bottom为10；下面的margin-top为10，按常理来说应该是10+10=20-->
14          <div>33333</div>  <!--，但是答案仍然是10px-->15     </body>
16 </html

运行结果：