css学习

沅芷澧兰！

已于 2022-04-23 15:43:05 修改

阅读量455

点赞数 1

文章标签： css

于 2022-04-18 19:15:45 首次发布

本文链接：https://blog.csdn.net/weixin_52700040/article/details/124256766

版权

css 层叠样式

css语法规范

选择器+样式

<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>css语法规范</title>
    <style>
        p {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>

1.4代码风格

建议展开形式
一般采用小写书写
冒号后面保持一个空格，选择器保留一个空格

css基础选择器

css选择器作用

选择标签

标签名选择器

    <style>
            p {
        color: red;
                }
            div{
                color: pink;
            }
    </style>
</head>
<body>
    <p>男</p>
    <p>男</p>
    <p>男</p>
    <div>女</div>
    <div>女</div>
    <div>女</div>
    
</body>

类选择器

    <style>
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰</li>
        <li>冰2</li>
        <li>冰3</li>
        <li>冰4</li>
        <li>冰5</li>

    </ul>
    <div class="red">我也想变红</div>
</body>

案例

<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>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;

        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>

多类名

    <style>
        .red {
            color: red;
        }
        .font-35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font-35">刘德华</div>
</body>

id选择器

特点：只能调用一次

    <style>
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">杰克逊</div>
</body>

通配符选择器

    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <div>wd</div>
    <span>wd</span>
    <ul>
        <li>hswd</li>
    </ul>
</body>

css字体属性

字体样式font-family

h2 {
    font-family: '微软雅黑';
}
p {
    font-family: '微软雅黑';
}

    </style>
</head>
<body>
  <h2>上林赋</h2>

　<p>　亡是公听然而笑曰：“楚则失矣，而齐亦未为得也。夫使诸侯纳贡者，非为财币，所以述职也。

封</p>
   <p> 疆画界者，非为守御，所以禁淫也。今齐列为东藩，而外私肃慎，捐国逾限，越海而田，其于义固未
可也。</p>
<p>且二君之论，不务明君臣之义，正诸侯之礼，徒事争于游戏之乐，苑囿之大，欲以奢侈相胜，
荒淫相越。</p>
<p>此不可以扬名发誉，而适足以贬君自损也。且夫齐楚之事，又乌足道乎？君未睹夫巨丽
也，独不闻天子之上林乎？</p>

</body>

字体粗细

font-weight
bold加粗
class=“bold”;
style里面
.bold {
font-weight: 700;
}
font-weight: normal或者400//正常不变粗

文字样式

font-style;
italic倾斜
normal正常

字体复合属性

    <style>
        div {
            font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'microsoft yahei';
        }

    </style>
</head>
<body>
    <div>三生三世十里桃花，一心一意百行代码</div>

等价于font: font-style font-weight font-size/line-height font-family

  <style>
        div {
       font: italic 700  16px 'microsoft yahei';
        }

    </style>

一定有size 和 family.

文本属性

文本颜色

预定义，十六进制，rgb代码

对齐文本

text-align: center/right/left

装饰文本

text-decoration: none默认 underline下划线
line-through 删除线 overline 上划线

文本缩进

text-indent: xxpx;首行缩进xx距离
text-indent: 2em
2em当前文字大小两个字距离

行间距

line-height行高

css的引入方式

css三种样式表

内部样式表
行内样式表在标签内部写style=“”

外部样式表单独建css文件

建一个css文件
link链接

综合样例

<!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 'Microsoft YaHei';
        }
        h1 {
            font-weight: 400;
            text-align: center;
        }
        a {
            text-decoration: none;
        }
        .gray {
            color: #888888;
            font-size: 12px;
            text-align: center;
        }
        .search {
            color: #666666;
            width: 170px;
        }
        .btn {
            font-weight: 700;
        }
        p {
            text-indent: 2em;
        }
        .jpg {
            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>
    <p class="jpg">
        <img src="123.jpg" height="500">
    </p>
<h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日。</h4>
<p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
<p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中河北衡水地表温度高达68.3℃,天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>
<h4>明日热度再升级!京津冀携手冲击38℃+ 。</h4>
中国天气网气象分析师王伟跃介绍,明天(4日),华北,黄淮地区35℃以上的高温天气还将继续升级,并进入鼎盛阶段,高温强度和范围都将发展到最强。
<p class="footer">(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)
本文来源:中国天气网 责任编辑:刘京_NO5631</p>
</body> 
</html>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/62d68a8dcaae4049b0f3e5bb169adc1e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc3RhbmQgICAgYnkgICAgbWU=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

效果
在这里插入图片描述

调试工具

f12

Emmet语法

快速生成html
标签名+Tab键
标签名*10+TAB键

父子关系

兄弟关系
.demo$*5 $自增符号

css中
格式化语法

css复合选择器

后代选择器

    <style>
        ol li {
            color: pink
        }

        ol a {
            color: red;
        }

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

</head>

<body>
    <ol>
        biantai
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li><a href="#">我是孙子</a></li>
    </ol>

    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul class="nav">
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

子元素选择器

必须选的是儿子

    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

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

选择器课堂练习

    <style>
        .nav ul li a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">百度</a></li>
            <li><a href="#">百度</a></li>
        </ul>

    </div>
</body>

    <style>
        .hot>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="hot">
        <a href="#">大肘子</a>
        <ul>
            <li><a href="#">猪</a></li>
            <li><a href="#">猪</a></li>
        </ul>
    </div>
</body>

并集选择器

元素1，元素2{}

    <style>
        div,
        p,
        .pig {
            color: red;
        }
    </style>
</head>

<body>
    <div>1</div>
    <p>2</p>
    <span>3</span>
    <ul class="pig">
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

伪类选择器

1链接伪类

a:link
a:visited
a:hover
a:active

    <style>
        a:link {
            color: #333;
            text-decoration: none;
        }

        a:visited {
            color: pink;
        }

        a:hover {
            color: red;
        }

        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
</body>

focus伪类选择器

获取具有光标的表单处理器

html
    <style>
        input:focus {
            background-color: pink;
        }
    </style>
</head>

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

复合选择器

在这里插入图片描述

css元素显示模式

块元素
行内元素

块元素

在这里插入图片描述

行内元素

在这里插入图片描述

行内块元素

最常见表单，图片等

总结

元素显示模式转换

转换成块元素

display：block转换成块元素

display: inline转化成行内元素

display：inline-block 转换成行内块

html
    <style>
        a {
            height: 100px;
            width: 300px;
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: aqua;
            display: inline;
        }
        span {
            width: 300px;
            height: 200px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">123</a>
    <div>456</div>
    <div>456</div>
    <span>123</span>
    <span>123</span>
</body>

案例简洁小米测单栏

html
    <style>
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }

        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>
</body>

垂直居中

让height=line-height

css的背景

背景颜色

background-color 默认为透明

背景图片

background-image: url()

背景平铺

background-repeat

背景图片位置

background-position: x y;

center top 水平居中

html
    <style>
        h3 {
            width: 118px;
            height: 40px;
            background-color: pink;
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-image: url(title_sprite.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 1.5em;
        }
    </style>
</head>

<body>
    <h3>
        成长守护平台
    </h3>

html
    <style>
        body {
            background-image: url(wz.jpg);
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>

背景精确

第一个一定是x

背景混合单位

第一个一定是x

背景固定

background-attachment:fixed;固定

html
    <style>
        body {
            background-image: url(wz.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
    <p>天王盖地虎，康成一米五</p>
</body>

往下滑动图片不会动

background 复合写法

没有属性顺序要求

背景颜色半透明

background：rgba（0，0，0，0.3）

最后一个参数是透明度

背景总结

在这里插入图片描述

综合案例

<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 {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 48px;
            color: red;
            text-decoration: none;
        }

        .nav .bg1 {
            background: url(1.png) no-repeat;
        }

        .nav .bg2 {
            background: url(2.png);
        }

        .nav .bg3 {
            background: url(3.png);
        }

        .nav .bg4 {
            background: url(4.png);
        }

        .nav .bg5 {
            background: url(5.png);
        }

        .nav .bg1:hover {
            background-image: url(2.png);
        }

        .nav .bg2:hover {
            background-image: url(5.png);
        }

        .nav .bg3:hover {
            background-image: url(5.png);
        }

        .nav .bg4:hover {
            background-image: url(5.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
        <a href="#" class="bg5">五彩导航</a>



    </div>
</body>

css三大特性

层叠性

原则：1. 就近原则

只有样式冲突才会覆盖

继承性

行高继承

font：12px/1.5

是文字自己大小的1.5倍。

优先级

选择器相同就就近原则

其他按权重
在这里插入图片描述

沅芷澧兰！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css学习

css 层叠样式css语法规范选择器+样式<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>css语法规范</title>
复制链接

扫一扫