CSS基础语法讲解

最新推荐文章于 2022-08-25 22:25:29 发布

changeie

最新推荐文章于 2022-08-25 22:25:29 发布

阅读量303

点赞数

本文链接：https://blog.csdn.net/changeie/article/details/79123350

版权

 
 CSS称为层叠样式表(级联样式表)  
 全称为: Cascading Style Sheets， 
 主要用来设置网页的样式， 
 后缀名： .css 

 
 介绍了CSS的基本结构后，我们怎么能使用它呢，怎么能把他放在HTML中使他功能产生作用呢。以下为大家简述几种方法。 

 
 方法一：内联引入 

 
  在元素上加属性style，格式如下： 
 
  <元素 style="属性1:属性值1;属性2:属性值2;"></元素> 
 
  这种方法虽说简单快捷，但是缺点比较大，内联方式的CSS与HTML的代码放在一起，导致代码不美观，并且导致可维护性差，可复用性差，而且内联样式一次，只能对一个标签起作用，如果有多个相同属性样式，需要重复写很多，数量比较大的话，量比较大。 
 
  方法二：内嵌引入

 
  在head中写style标签，style标签中写CSS内容，格式如下： 
 
  <style> 
 
  选择器{ 
 
  属性名：属性值; 
 
  属性名：属性值; 
 
  。。。 
 
  } 
 
  div{ 
 
  font-size:20px; 
 
  color: #f00 
 
  } 
 
  </style> 
 
内嵌引入和内联的方法差不多，样式也差不多，所以缺点也一样。所以编写CSS样式表，不推荐这两种方式。

 
 方法三：外部引入（推荐） 

 
 将CSS样式内容独立为.css文件，在HTML中通过link标签引入，强烈推荐使用这种方式，它 
 将CSS与HTML独立出来，代码整洁 
 ，方便观看和查找， 
 可复用性高 
 ，维护起来也比较方便。 

外部引用的使用发法： 
  link标签的属性： 
 
rel="stylesheet" 告诉浏览器这是一个样式表
href="CSS文件的路径" 链接引入对应的CSS文件
<head>
     <meta charset='utf-8' />
     <title> CSS引入方式</title>
 <link rel='stylesheet' href='CSS/03.css' />
   </head>
 方法四：导入（不推荐）

 
  @import 导入文件， 不推荐使用，使用方式： 
 
 
  <style> 
 
 
  @import url(CSS文件的路径) 
 
 
  </style> 
 
 
  或者在CSS文件中带入其他CSS文件的内容 
 
 
   
  link是HTML标签，@import只能在CSS中使用
link会在网页加载时同时加载，而@import需要网页完全载入才能加载
link无兼容问题，@import 是CSS2.1以后加入的，兼容性一般
link可以使用JS脚本控制，而@import不可以
 
 
 
  注意： 如果样式表内容不多，可以使用内嵌的方式，绝大多数情况推荐使用外部引入的方式。
  
 
以上方式的优先级顺序：link与style内嵌同时存在，采用“就近原则”，后写的会将先写的覆盖掉 
   内联的优先级要高于内嵌跟外部引入。 
  
 
   对于选择器的选择，以下推荐几种常用的选择器，供大家选择 
  
 
   一、元素选择器： 
  
 
   1、标签选择器：<html>
   <head>
     <meta charset='utf-8' />
     <title> CSS引入方式</title>
 <style>
 *{border: 2px solid #0f3;} <!--*代表所有元素-->
   
   iv{
     width: 400px;
 height: 300px;
 background: #f00;
   }
   p{
     background-color: #ff0;
   }
   .yellow-text{
     font-size: 40px;
 color: #ff0;
   }
   #blue{ 
     font-size: 50px;
 background-color:#00f;
 color: #f06;
   } <!--ID属性只能有一个，优先级比较高-->
 </style>
 </head>
   <body>
     <div>hello world!</div>
 <div class='yellow-text'>hello world!</div>
 <p>this is the p</p>
 <div class='yellow-text'>hello world!</div>
 <div>hello world!</div>
 <div id='blue'>hello world!</div>
   </body>
 </html> 
  
以上为标签选择器代码，选择的是所有的div标签。

2、class选择器： 
  给元素添加class属性（相当于起个名字），然后在css中 
  .class名{属性：属性} 
  值} 
 
  class命名：多个单词的时候： word1-word2 
 
  <p class='text' id='blue'>this is the p</p>
 <p class='blue-text' id='black'>this is the p</p>
 <div class='yellow-text'>hello world!</div>
  
  3、ID选择器： 
 
   给元素添加ID属性，在css中通过 
   #id名{} 
   设置样式， 
   ID是唯一标识， 
   一个页面中不要有重复的ID，一个ID名只能出现一次， 
   一般不要用ID作为选择器，因为优先级比较高。 
  
<div id='blue'>hello world!</div>
 
  #red{background-color:#f00;}
  
  4、通配符： 
 
  *{} *代表选中所有元素 
 
  5、选择器的优先级：!important>#id选择器>.class选择器>标签选择器>* 
 
  二、关系选择器 
 
  1、后代选择器：以下代码中选择器选中的是div中所有的a标签，不管是子级还是孙子级别的都会被选中 
 
   div a{
   background-color: #00f;
   }
  
  2、子级选择器：以下代码中选择器只会选中div的子级a元素，孙子级不会被选中 
 
   div>a{
   background-color: #f09;
   }
  
  盒模型 
 
   块级元素如果没有设置宽度，默认就是占满父级元素的宽度，就是100%； 
  
   如果没有设置高度，高度是被内容撑开的 
  
  还有一些属性选择符，伪类选择符，伪对象选择符。这些选择符不是很常用，有想要了解的朋友了解一下即可。

changeie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础语法讲解

CSS称为层叠样式表(级联样式表) 全称为: Cascading Style Sheets，主要用来设置网页的样式，后缀名： .css介绍了CSS的基本结构后，我们怎么能使用它呢，怎么能把他放在HTML中使他功能产生作用呢。以下为大家简述几种方法。方法一：内联引入在元素上加属性style，格式如下：这种方法虽说简单快捷，但是缺点比较大，内联方式的CSS与HTML的代
复制链接

扫一扫