当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 荐 CSS初学习总结

荐 CSS初学习总结

2020年07月14日  | 移动技术网IT编程  | 我要评论

CSS初学习总结

问：什么是CSS？
答：CSS全称为Cascading Style Sheets，层叠样式表，在网页制作时采用CSS技术，可以有效地美化、装饰页面。如果说HTML是毛胚房，那么CSS就相当于装修工，JS则是给房子走了水电，从而达到交互效果。

1、学习CSS就是学习选择器和CSS属性。

学习CSS就是学习选择器和CSS属性。
选择器就是用来选择页面上某个元素的。

1.1基本选择器有哪些？
  1. 标签选择器：简单的选择器，就是选中页面中同类型的标签。
  2. ID选择器：想要选中某一个标签，则可以实用ID选择器。先给标签起个id名，然后通过#id名选中。通常ID选择器是为了让JS来选中的。
  3. CLASS选择器：同上。先给标签起个class名，然后通过.class名选中。项目中使用class选择器是非常多的，CLASS选择器是为了让css来选中的。
<!DOCTYPE html> 
<html lang="en"> 
<head>     
    <title>基本选择器</title>     
    <style>
        /* 标签选择器 ：选中页面上所有的p标签*/
        span{color: plum;}
        /* ID选择器 ：先给标签起个ID名  然后通过#ID名选中*/
        #one{color: pink;}
        /* CLASS选择器：先给标签起个class名,然后通过.class名选中 */
       .two{color:skyblue;}     
    </style> 
</head> 
<body>     
    <span>哈哈哈哈</span>     
    <span>一起做练习吧！</span>     
    <p id="one">这是一个p标签,把字体颜色设置为pink</p>     
    <p class="two">这是一个p标签,把字体颜色设置为skyblue</p> 
</body> 
</html>
1.2高级选择器有哪些？
  1. 后代选择器：可以保证选中某个元素内部的某些元素。
  2. 交集选择器：p.box就是交集选择器，必须是p标签，并且p标签中有class="box"这个类。
  3. 并集选择器选择器：一次性选中多个元素，多个选择器中间使用逗号隔开。
  4. 通配符选择器：*{}表示选中所有选择器，包含body、html标签。
 <!DOCTYPE html> 
 <html lang="en"> 
 <head>     
 <title>高级选择器</title>     
     <style>         
          /* 后代选择器：空格表示后代,看到空格就立即想到后代 */         
          .grandpa .father .son{ color: slateblue;}         
          /* 交集选择器：p和.box中间没有空格，p .box就表示后代了 */
          p.box{color: yellowgreen;}                                
          /* 并集选择器：一次性选中多个元素,看到逗号，就想到并集选择器 */                    
          .grandpa .father .son,p.box,div.box{color: tomato;}
          /* 通配符选择器：*{}表示选中所有选择器  包含body html标签 */
          *{margin: 0;padding: 0;}                  
     </style> 
 </head> 
 <body>     
     <div class="grandpa">         
          <div class="father">             
              <div class="son">                
               注意：后代不一定是儿子，可以是孙子，曾孙子，重孙子...都行。
               </div>                           
          </div>    
     </div>     
     <p>这是一个p标签</p>     
     <p class="box">这是第二个p标签</p>    
     <div class="box">这是一个div标签</div> 
</body> 
</html>
1.3与文字设置相关的属性
  1. 设置文字颜色：color
  2. 设置文字是否倾斜：font-style
  3. 设置文字是否加粗：font-weight
  4. 设置文字大小：font-size
  5. 设置文本行高：line-height
  6. 设置文字字体：font-family
  7. 设置文本修饰线：text-decoration
  8. 综合属性：font
<!DOCTYPE html>  
<html lang="en">  
<head>      
<title>文字相关的设置</title>      
<style>          
*{margin: 0;padding: 0;}          
span{              
/* 设置字体倾斜 */              
font-style: italic;              
/* 设置字体加粗 */              
font-weight: bold;             
/* 设置总体大小为20px */              
font-size: 20px;              
/* 设置行高为字体大小的2倍 */              
line-height: 2;              
/* 设置文字字体 */              
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;              
/* 给文本添加下划线 */              
text-decoration: underline;              
/* 设置字体颜色 */              
color: yellowgreen;          
}         
 p{                
 /* font综合属性：font-style  font-weight  font-size/line-height  font-family*/              
 font: italic bold 25px/2 Cambria, Cochin, Georgia, Times;          }
</style>  
</head>  
<body>      
<span>这是我的第一篇博客<span>      
<p>作为小白如果我写的有不正确的，欢迎大家指正。</p>  
</body>  
</html>
1.4盒子模型

问：什么是盒子？
答： 每一个标签都是一个个盒子，只要是标签就是盒子。我们平常所
说的盒子模型很重要，指的是设置盒子模型的六大属性很重要。学习盒子模型，就是学习上边的六大属性！！！

一个盒子由如下几个部分组成：

  1. 内容content(width/height)
  2. 内填充padding(上下左右)
  3. 边框border(上下左右)
  4. 外填充margin(上下左右)
  5. 背景 背景颜色和背景图片

盒子模型六大属性：

  1. width 表示盒子内容区域的宽度
  2. height 表示盒子内容区域的高度
  3. padding 表示盒子内容填充
  4. border 表示盒子的边框
  5. border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）
  6. margin 表示盒子的外边距
  7. background 表示盒子的背景 包含背景颜色和背景图片
<!DOCTYPE html> 
<html lang="en"> 
<head>     
    <title>盒子模型</title>     
    <style>         
        .box{             
            width: 100px;                
            height: 100px;            
            border: 2px solid red;             
            padding: 10px;             
            margin: 10px;             
            /* 背景可以充满内容和padding区域 */             
            background: pink;         
            }     
    </style> 
</head> 
<body>     
    <div class="box">         
        box    
   </div>      
</body> 
</html>

1.5 内边距与外边距

1.5.1padding：内填充，也叫做补白，也叫做内边距。
表示内容与边框之间的距离。分四个方向。
可以分开设置，如下：
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 30px;

<!DOCTYPE html> 
<html lang="en"> 
<head>     
    <title>内边距</title>     
    <style>         
        .box{             
            width: 100px;                 
            height: 100px;             
            border: 2px solid red;             
            padding-top: 10px;             
            padding-right: 20px;             
            padding-left: 40px;             
            padding-bottom: 30px;         
            }     
    </style> 
</head> 
<body>     
    <div class="box">        
       box     
    </div>      
</body> 
</html>

也可同步设置：
只写一个padding，后面可以跟上1个值，2个值，3个值，4个值。
1个值：padding: 10px; 表示4个方向的内填充都是10px。
2个值：padding: 10px 20px; 第1个值表示上下，第2个值表示左右。 3个值：padding: 10px 20px 30px; 第1个值表示上，第2个值表示左右， 第3个值表示下。
4个值：padding: 10px 20px 30px 40px; 顺序是上、右、下、左。
margin与padding图解

1.5.2margin:外填充，也叫做外边距。
表示边框与边框之间的距离。分四个方向。
可以分开设置，如下：
margin-top: 10px;
margin-right: 20px;
margin-left: 20px;
margin-bottom: 30px;

<!DOCTYPE html> 
<html lang="en"> 
<head>     
    <title>外边距</title>     
    <style>         
        .box{             
            width: 100px;                 
            height: 100px;             
            border: 2px solid red;             
            margin-top: 10px;             
            padding-right: 20px;             
            padding-left: 40px;             
            padding-bottom: 30px;         
            }     
    </style> 
</head> 
<body>     
    <div class="box">        
       box     
    </div>      
</body> 
</html>

也可同步设置：
可以只写一个margin，后面可以跟上1个值，2个值，3个值，4个值。
1个值：margin: 10px; 表示4个方向的内填充都是10px。
2个值：margin: 10px 20px; 第1个值表示上下，第2个值表示左右。
3个值：margin: 10px 20px 30px; 第1个值表示上，第2个值表示左右， 第3个值表示下 。
4个值：margin: 10px 20px 30px 40px; 顺序是上、右、下、左。

大多数标签都有默认的padding和margin，不利于我们布局和美化页面，所以： *{margin：0；padding：0} 经典代码。

1.6 CSS颜色表示法

css中很多属性都需要使用颜色来表示。

颜色表示法：

  1. 单词表示 pink skyblue yellowgreen
  2. rgb表示法 三原色：rgb(red green blue)任何颜色都能使用三原色组成
  3. 16进制表示法

单词表示：
不能表示所有的颜色，人不能记住那么多的颜色单词，只能记住常见的

rgb表示法：
每一种颜色的取值是0~255
rgb(0，0，0)表示黑色
rgb(255,255,255)表示白色
rgba:a表示透明度，取值0~1，0表示完全透明，1表示不透明
红色：color:rgba(255, 0, 0, 1);
绿色：color:rgba(0, 255, 0, 1);
蓝色：color:rgba(0, 0, 255, 1);
黑色：color:rgba(0, 0, 0, 1);
白色：color:rgba(255, 255, 255, 1); …
使用rgb可以表示255255255=16,581,375种颜色

16进制表示：
#打头。如：#_ _ _ _ _ _ 前两位是红 中间两位是绿 后两位是蓝
16进制：0 1 2 3 4 5 6 7 8 9 a b c d e f
红色：#ff0000
绿色：#00ff00
蓝色：#0000ff
黑色：#000000
白色：#ffffff …
opacity:0;透明度

<!DOCTYPE html>
<html lang="en">
<head>    
   <title>CSS颜色表示法</title>    
   <style>        
       h1{color: skyblue;}        
       h2{color:rgba(255, 100, 100, 1);}        
       h3{color: #bf8dd3;}       
   </style>
</head>
<body>    
   <h1>这是一个标题标签</h1>    
   <h2>这是一个二级标题标签</h2>    
   <h2>这是一个三级标题标签</h2>
</body>
</html>

本文地址：https://blog.csdn.net/Zxt0518/article/details/107269423

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网