css基础

时间：2018-05-11 23:39:49 阅读：223 评论：0 收藏：0 [点我收藏+]

一、CSS的引入方式

1、行内式

<p style="color:red">红色</p>

2、嵌入式

将CSS样式表集中写在head标签的style标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    p{
      color: red;
    }
  </style>
</head>
<body>
<p>红色</p>
</body>
</html>

View Code

3、链接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <link rel="stylesheet" href="css.css">
</head>
<body>
<p>红色</p>
</body>
</html>

View Code

css.css为css文件的文件路径

4、导入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style type="text/css">
    @import url(‘css.css‘);
  </style>
</head>
<body>
<p>红色</p>
</body>
</html>

View Code

导入式将在所有内容加载完毕后在加载css样式表

二、选择器

1、基础选择器

a、通用元素选择器

语法：*{}

作用所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    *{
      color: red;
    }
  </style>
</head>
<body>
<p>红色</p>
<p>蓝色</p>
</body>
</html>

View Code

b、标签选择器

语法：标签{}

作用于匹配的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    p{
      color: red;
      background-color: #b3d4fc;
    }
  </style>
</head>
<body>
<p>红色</p>
<p>蓝色</p>
</body>
</html>

View Code

c、id选择器

语法：#id{}

作用于匹配id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    #red{
      color: red;
      background-color: #b3d4fc;
    }
  </style>
</head>
<body>
<p id="red">红色</p>
</body>
</html>

View Code

d、类选择器

语法：.类名{}

作用于匹配的类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    .red{
      color: red;
      background-color: #b3d4fc;
    }
  </style>
</head>
<body>
<p class="red">红色</p>
</body>
</html>

View Code

2、组合选择器

a、多元素选择器

语法：标签A,标签B{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    div,p{
      background-color: aqua;
    }
  </style>
</head>
<body>
<div>www</div>
<p>www</p>
</body>
</html>

View Code

b、后代元素选择器

后代与子代的区别：后代包括孙子辈，子代只是父子

语法：标签A 标签B 中间用空格，标签A与标签B指的是，在没有后代等复杂关系时能匹配到他们的方法，可以是上面提到的选择器之一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    div .low{
      color: aqua;
    }
  </style>
</head>
<body>
<div>
  <div>
    <div>
      <p class="low">www</p>
    </div>
  </div>
</div>
</body>
</html>

View Code

c、子代元素选择器

语法：标签A>标签B

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    .top>p{
      color: red;
    }
  </style>
</head>
<body>
<div>
  <div>
    <div class="top">
      <p class="low">www</p>
      <p>www</p>
    </div>
  </div>
</div>
</body>
</html>

View Code

d、毗邻元素选择器

语法：标签A+标签B

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    .low+p{
      color: red;
    }
  </style>
</head>
<body>
<div>
  <div>
    <div class="top">
      <p>www</p>
      <p class="low">www</p>
      <p>www</p>
    </div>
  </div>
</div>
</body>
</html>

View Code

3、属性选择器

标签可以省略

a、语法：标签[属性attr]{} ，功能：匹配所有属性为attr的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    [attr]{
      color: red;
    }
  </style>
</head>
<body>
<div>
  <div>
    <div class="top">
      <p attr="bbu">www</p>
      <p attr="low">www</p>
      <p attr="qqq">www</p>
    </div>
  </div>
</div>
</body>
</html>

View Code

结果：www全为红色

b、语法：标签[属性attr=‘‘value‘‘]{}，功能：匹配所有属性值为value的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    [attr=‘low‘]{
      color: red;
    }
  </style>
</head>
<body>
<div>
  <div>
    <div class="top">
      <p attr="bbu">www</p>
      <p attr="low">www</p>
      <p attr="qqq">www</p>
    </div>
  </div>
</div>
</body>
</html>

View Code

结果：中间www变红

c、标签[属性attr~=‘‘value1‘‘]{}，功能：匹配attr具有多个用空格分开的值，其中一个值为value1的元素　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    [attr~=‘eee‘]{
      color: red;
    }
  </style>
</head>
<body>
<div>
  <div>
    <div class="top">
      <p attr="bbu">www</p>
      <p attr="low">www</p>
      <p attr="qqq eee">www</p> 变红
    </div>
  </div>
</div>
</body>
</html>

View Code

d、标签[属性attr^=‘‘value‘‘]{}，匹配属性值以value开头的元素

标签[属性attr$=‘‘value‘‘]{}，匹配属性值以value结尾的元素

标签[属性attr*=‘‘value‘‘]{}，匹配属性值包含value的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style>
    [attr^=‘bb‘],[attr$=‘w‘],[attr*=‘w‘]{
      color: red;
    }
  </style>
</head>
<body>
<div>
  <div>
    <div class="top">
      <p attr="bbu">www</p> 变红
      <p attr="low">www</p> 变红
      <p attr="qwe">www</p> 变红
    </div>
  </div>
</div>
</body>
</html>

View Code

4、伪类

给选择器添加一些特殊的效果

a、anchor伪类

控制链接的显示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <style type="text/css">
    a:link{
      color: blueviolet; 
    }    未访问的链接
    a:hover{
      color: red;
    }   鼠标悬浮在链接上时显示效果
    a:visited{
      color: #888888;
    } 访问过后的效果
    a:active{
      color: cadetblue;
    }  鼠标选中时的效果
  </style>
</head>
<body>
<a href="伪类.html" target="_blank">百度一下</a>
</div>
</body>
</html>

View Code

b、befor，after伪类

在元素前后加上一些元素，加上的元素时通过css渲染得到的，在浏览器中不能被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div:after{
      content: ‘World‘;
    }
    div:before{
      content: ‘Zz‘;
    }
  </style>
</head>
<body>
<div>Hello</div>
</body>
</html>

View Code

css基础

标签：AC 文件路径 bfd 没有引入空格 css样式 alt url

原文地址：https://www.cnblogs.com/sumcet/p/9026314.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行