css用法详解1，可直接运行（选择器详解）

最新推荐文章于 2024-03-23 01:00:00 发布

菜鸡圣龙进化菜松鼠

最新推荐文章于 2024-03-23 01:00:00 发布

阅读量855

点赞数 3

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/QiaoLiu___lq/article/details/123164891

版权

本文详细介绍了CSS的各种参数如宽度、高度、颜色等，涵盖了标签选择器、类选择器、ID选择器、通配符选择器，以及样式表的编写，包括行内样式和外部样式，并讲解了复合选择器如后代选择器、子选择器和伪类选择器的用法。

摘要由CSDN通过智能技术生成

css

文章目录

CSS写到标签中的

1.各种参数

 width：100px；（宽）
 height：100px；（高）
background-color：red；（背景颜色，红色）
color： red；（字体颜色，红色）（#00ffbf4f）这种形式
font-family:"微软雅黑"；（字体样式）（如果多种字体，那么会从第一个开始选择）
font-size: 20px;(字体大小)
font-weight：700；（比较粗的文字）
font-style：italic；（倾斜的文字）
text-align: center;(对齐方式， left， right)
text-decoration:underline(下划线  overline上划 line-through删除线)
text-indent：2em；（段落首行缩进2个字符）
line-height：26px；（行间距包括上下间距和文本高度的和  ）

2.案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p{
    color:red;//颜色
    font-size:100px;//字号
    }
  </style>
</head>
<body>
<p>奇奇怪怪</p>
</body>
</html>

3.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      p {
      color: green;
      }
      div {
      color: pink;
      }
  </style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>

4.类选择器（多类名）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .red{
    color: red;
    }
  </style>
</head>
<body>
<ul>
    <li class="red">popo宝贝</li>
    <li>陈余之小天使</li>
    <li>易柏辰人间可爱</li>
</ul>
<div class="red">易恩也想加入群聊</div>
</body>
</html>

5.id选择器

（样式用#定义，结构id调用，只能调用一次，别人切勿使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #pink{
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">popo小可爱</div>
</body>
</html>

6.通配符选择器

（选择页面中所有的元素标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: burlywood;
        }
    </style>
</head>
<body>
    <div id="pink">popo小可爱</div>
    <span>陈余之小天使</span>
     <ul>
         <li>易柏辰萌萌~</li>
     </ul>
</body>
</html>

7.样式表

1.行内样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    </style>
</head>
<body>
    <h2>易恩yyds</h2>
    <div style="color: darkcyan; font-size: 12px;">popo小宝贝</div>
    <span >陈余之小天使</span>
     <ul>
         <li>易柏辰萌萌~</li>
     </ul>
</body>
</html>

2.外部样式表（先新建css文件）（最多使用）

    <link rel="stylesheet" href="style.css">（html的head中，，，link再加tab补全）
再外部同一路径下有一个#style.css文件

8.复合选择器

1.后代选择器

ul li {
            color: #965076;
        }

ex:

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            color: #965076;
        }


        .nav li {
            color: #b6a570;
        }
    </style>


    <!-- <link rel="stylesheet" href="style.css"> -->
</head>


<body>
    <h2>易恩yyds</h2>
    <div style="color: darkcyan; font-size: 12px;">popo小宝贝</div>
    <span>陈余之小天使</span>
    <ul>
        <li>易柏辰萌萌~</li>
    </ul>
    <ul class="nav">
        <li>易柏辰萌萌~</li>
        <li>易柏辰萌萌~</li>
        <li>易柏辰萌萌~</li>
    </ul>
</body>


</html>

2.子选择器（只选择到子的写法）

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav>a {
            color: darksalmon;
        }
    </style>
</head>


<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>


</html>

3.并集选择器

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav li,
        span {
            color: darksalmon;
        }
    </style>
</head>


<body>
    <div class="nav">
        <li>popo</li>
    </div>
    <span>popo 酱</span>
    <div class="popo">
        popo
    </div>
</body>


</html>

4.伪类选择器

( 按lvha的顺序书写，不可颠倒，就是下面这个例子的1234)链接的样式要单独指定，不包括在body里面，标题h也是

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1. 把没有访问过的链接选择出来 */
        a:link {
            color: rgba(17, 17, 14, 0.76);
            /* text-decoration: none; */
        }


        /* 2.把选择过链接选择出来 */
        a:visited {
            color: rgb(194, 128, 168);
        }


        /* 3.把鼠标经过的链接选择出来 */
        a:hover {
            color: darkslateblue;
        }


        /* 4.把我们鼠标正在按下还没松开的链接选择出来 */
        a:active {
            color: darkturquoise;
        }
    </style>
</head>


<body>
    <a href="#">popo</a>
    <a href="http://wwww.ggygyg.com">popo1</a>


</body>


</html>

5.focus伪类选择器

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把获得光标的input表单选取出来 */
        input:focus {
            background-color: firebrick;
            color: greenyellow;
        }
    </style>
</head>


<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>


</html>