零基础CSS笔记

最新推荐文章于 2023-05-22 20:37:03 发布

拾肆5229

最新推荐文章于 2023-05-22 20:37:03 发布

阅读量98

点赞数

分类专栏： html 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_58429740/article/details/129856365

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.css简介

层叠样式表，用于在控制网页的外观
外部样式表、内部样式表、行内样式表、

2.css语法规范

css规则主要由两部分组成：选择器以及一条或多条声明
选择器是用于css样式的html标签，花括号内是对该对象设置的具体样式
属性和属性之间以“键对值”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性值和属性值之间用：分开

3.css基础选择器

选择器：选择标签用的

3、字体属性

4、文本属性

5、css引入方式

综合案例：新闻页面

<!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>
        body {
            font: 16px/28px '微软雅黑';
        }

        h1 {
            /* 文字不加粗 */
            font-weight: 400;
            /* 水平居中 */
            text-align: center;
        }

        a {
            text-decoration: none;
        }

        .gray {
            color: #888888;
            font-size: 12px;
            text-align: center;
        }

        .search {
            color: #666;
            width: 170px;
        }

        .btn {
            font-weight: 700;
        }

        p {
            /* 首行缩进两个字的距离 */
            text-indent: 2em;
        }

        .pic {
            text-align: center;
        }

        .footer {
            color: #888888;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <div class="gray">2019-07-03 16:31:47 来源: <a href="#">中国天气网</a>
        <input type="text" value="请输入查询条件..." class="search">
        <button class="btn">搜索</button>
    </div>
    <hr>
    <p>中国天气网讯今天（3日），华北、黄淮多地出现高温天气，截至下午2点，
        北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日）
        ，这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛
        ，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，
        其中北京和石家庄的最高气温还有望创今年以来的新高。</p>

    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
    <p>
        <img src="pic.jpeg">
    </p>

    <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，
        陕西北部、山西西南部、河北南部、北京、天津、山东西部、
        河南北部最高气温已普遍超过35℃。大城市中，
        北京、天津、郑州均迎来高温日。</p>

    <p>在阳光暴晒下，地表温度也逐渐走高。
        今天下午2点，华北黄淮大部地区的地表温度都在50℃以上
        ，部分地区地表温度甚至超过60℃。其中，
        河北衡水地表温度高达68.3℃，
        天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>

    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
    <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、
        黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，
        高温强度和范围都将发展到最强。
        明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。
    </p>
    <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。
        （文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>

    <p class="footer">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>

</html>

CSS第二天

1、emmet语法

2.css复合选择器

小米侧边栏案例

 <style>
        /* 1、把a转换成块元素 */
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
        }
        /* 2、鼠标经过链接变换背景颜色 */
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">智能 路由器</a>
    <a href="#">耳机 音响</a>
</body>

综合案例

五彩导航栏

CSS第三天

1、层叠性原则

样式冲突，遵循的原则是就近原则，那个样式离结构近，就执行那个样式。

样式不冲突，不会实行层叠性

 <title>层叠性</title>
    <style>
        div {
            color: red;
            font: size 12px;
        }

        div {
            color: blue;
        }
    </style>
</head>

<body>
    <div>长江后浪推前浪，一浪更比一浪强</div>
</body>

2、继承性

css中继承性是子标签会继承父标签的某些样式，如文本的颜色

恰当地使用继承性，可以简化代码，降低css样式的复杂性

可以继承关于文字的样式

 <title>继承性</title>
    
    <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>
        <p>你是厚度防火防盗数据</p>
    </div>
</body>

行高的继承：

<title>优先级</title>
    <style>
        div {
            color: red;
        }

        .test {
            color: blue;
            !important
        }

        #demo {
            color: gray;
        }
    </style>
</head>

<body>
    <div class="test" id="demo" style="color:brown">你笑起来增好看</div>
</body>

4、权重的叠加

 <title>权重的叠加</title>
    <style>
        /* 样式冲突，谁的权重高就执行谁 */
        .nav li {
            color: red;
        }

        /* 类选择器的权重为10可以加粗 */
        .nav .pink {
            color: pink;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li class="pink">人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没wifi</li>
    </ul>

新浪导航案例

 <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeefc;
            background-color: #fcfcfc;
            line-height: 41px;

        }

        .nav a {
            /* a属于行内元素，此时必须要转换行内块元素 */
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .nav a:haver {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>
</body>