总结了一下css的部分基础知识点。---css学习笔记01

最新推荐文章于 2023-08-18 20:40:23 发布

angying4104

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/lucky-lf/p/7069927.html

版权

一. css基础

1. 什么是css

层叠样式表：层叠

2. css的三种使用方式

style 属性 --》

<div style="css属性值"></div>

style 属性 --》写在head标签里

<head>
    <style> 
        ...
    </style>
</head>

link 外都引入单独的css文件 --》

<link rel="stylesheet" href="style.css">

3. css 三种基础选择器

html标签选择器
1. 通过标签名当选择器来使用。
2. 无论藏的多深都可以被选中。
3. 选择的是所有的标签，通常通过标签选择器设置共性问题。
id选择器 #id名
1. id的名字是唯一的。
2. 任何的标签都可以具有id属性（id是全局属性）。大小写敏感，给元素设置id时（设置class时也一样），可以使用驼峰命名法。
class选择器 .class名
1. class属性名可以重复使用。
2. 任何标签都可以有class属性（全局属性）
3. class的值可以有多个。<h1 class="t1 t2"></h1>
通配符 *
- 选择所有的标签，能少用就少用。

二. 综合选择器

1. 后代选择器 div p

div p 选中的是div 里面的p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div p {
            color: red;
    }
    </style>
</head>
<body>
    <div>
        <p>p1</p>
    </div>
    <p>p2</p>
</body>
</html>

1. 交集选择器 div.d1

div.d1 选择div与class="d1"的交集

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div.d1 {
        color: red;
    }
</style>
</head>
<body>
<div class="d1">
    div1
</div>
<div class="d2">
    div2
</div>
</body>
</html>

1. 并集选择器 div,p

div，p 选择所有的div和p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div.d1,p.p1 {
        color: red;
    }
</style>
</head>
<body>
    <div class="d1">div1</div>
    <div class="d2">div2</div>
    <p class="p1">p1</p>
    <p class="p2">p2</p>
</body>
</html>

1. 子元素选择器 div>p --css3出现的

div>p 选择div标签的子元素里面的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div.d1>p {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">
            <p class="p1">div-div-p</p>
        </div>
        <p class="p2">div-p</p>
    </div>
</body>
</html>

1. 序列选择器：first-child ：last-child

：first-child ：last-child 用来选择列表中的第一个和最后一个，不能选择其它的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul li:first-child {
            color: red;
        }
        ul li:last-child {
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
        <li>第四行</li>
    </ul>
</body>
</html>

1. 相邻兄弟选择器 div + p

div + p 选择与div相邻的一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .d1 + p {
            color: red;
        }
    </style>
</head>
<body>
    <div class="d1">div1</div>
    <p class="p1">p1</p>
    <p class="p2">p2</p>
</body>
</html>

1. 普通兄弟选择器 div ~ p

div ~ p 选择与div同一级的其它子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .d1 ~ p {
            color: red;
        }
    </style>
</head>
<body>
    <div class="d1">div1</div>
    <p class="p1">p1</p>
    <p class="p2">p2</p>
</body>
</html>

转载于:https://www.cnblogs.com/lucky-lf/p/7069927.html

angying4104

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
总结了一下css的部分基础知识点。---css学习笔记01

一. css基础1. 什么是css层叠样式表：层叠2. css的三种使用方式style 属性 --》<div style="css属性值"></div>style 属性 --》写在head标签里<head> <style> ... </style></head>li...
复制链接

扫一扫