CSS基础（一）个人笔记

最新推荐文章于 2024-07-25 11:52:08 发布

jredu1996

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量243

点赞数 1

分类专栏：新手 html5 文章标签： html css

本文链接：https://blog.csdn.net/jredu1996/article/details/76173921

版权

新手同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

选择器

1.标签选择器

它会选中当前页面所有的标签。
具体事例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*<!--标签选择器：他会选中当前页面所有的标签-->*/
        li{
            color: red;
            font-size: 20px;
        }
    </style>
    <title>css的选择器</title>
</head>
<body>
<ul>
    <li>山东科技大学</li>
    <li>烟台大学</li>
    <li>鲁东大学</li>
    <li>山东工商学院</li>
    <li>青岛理工大学</li>
</ul>
</body>
</html>

效果图：
这里写图片描述

2.id选择器

它会选中当前页面一个匹配的id元素的标签，同一页面,id不能重复。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #yt{
            /*id选择器选中当前页面一个匹配id的元素，同一个页面，id不能重复*/
            color: red;
        }
    </style>
    <title>id选择器</title>
</head>
<body>
<ul>
    <li id="yt">山东科技大学</li>
    <li>烟台大学</li>
    <li>鲁东大学</li>
    <li>山东工商学院</li>
    <li>青岛理工大学</li>
</ul>
</body>
</html>

效果图如下：
这里写图片描述

3.类选择器

它会将与之匹配的元素归为一类。
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*类选择器：将与之匹配的元素归为一类*/
        .yt{
            color: red;
        }
    </style>
    <title>类选择器</title>
</head>
<body>
<ul>
    <li class="yt">山东科技大学</li>
    <li class="yt">烟台大学</li>
    <li class="yt">鲁东大学</li>
    <li>山东工商学院</li>
    <li>青岛理工大学</li>
</ul>
</body>
</html>

效果图如下：
这里写图片描述

4.伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果。

将以上所写的所有选择器做一个的事例（方便理解）：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        div{
            background-color: yellow;
            height: 50px;
        }
        ul{
            list-style: none;
            font-size: 20px;
            color: red;
        }
        li{
            float: left;
            width: 210px;
            line-height: 50px;
        }
        li:first-child{
            margin-left: 50px;
        }
    </style>
    <title>列表实现导航栏布局</title>
</head>
<body>
<div>
        <ul>
            <li>购物车</li>
            <li>帮助中心</li>
            <li>加入收藏</li>
            <li>设为首页</li>
            <li>登录</li>
            <li>注册</li>
        </ul>
</div>
</body>
</html>

效果图如下：
这里写图片描述
还有不常用的其他选择器：后代选择器，子代选择器，相邻选择器等等，这里就不总结了。

样式

1.行内样式

特点：
1.样式和表现没有分离。
2.样式没有重用性。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
</head>
<body>
<div style="height: 80px;background-color: black"></div>
<div style="height: 40px;background-color: red"></div>
</body>
</html>

在div中加入style的属于行内样式。

2.内部样式

特点：
1.样式和表现分离。
2.样式有一定的重用性。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <style>

      </style>
    <title>div</title>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

在head中的写入style的属于行内样式。

3.外部样式

特点：
1.样式和表现完全分离。
2.样式有重用性。
单独写一个css文件的属于外部样式。

jredu1996

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础（一）个人笔记

选择器1.标签选择器它会选中当前页面所有的标签。具体事例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> /**/ li{ color: red; fon
复制链接

扫一扫