CSS基本样式和元素选择器

溪枫 ^

已于 2022-08-10 19:59:10 修改

阅读量113

点赞数

文章标签： css html

于 2022-08-09 23:44:37 首次发布

本文链接：https://blog.csdn.net/weixin_47232448/article/details/126257749

版权

css的引用方式

1.行内样式：不推荐使用;因为：只会针对当前标签生效，写重复样式很影响效率，例：

<h1 style="color: green;">天青色等烟雨，而我在等你</h1>

2.内部样式：在头部添加一个style标签 (在练习时使用)；
缺点：不利于复用，只能应用于当前文档。
3.外部样式：在外部新建一个css文件；
通过 link 标签关联css文件，link 标签写在头部；推荐使用：结构与表现分离，清晰且整体，复用性高。

<link rel="stylesheet" href="">

如何检测文件是否引入成功:按住Ctrl 点击当前css文件，看是否跳转到css文件。

选择器

1.标签选择器：直接使用标签。
2.类选择器：在标签中加一个属性，class=“class名”，在style中用点。
3.id选择器：在标签中加一个属性，id=“id名”，具有唯一性，具体体现在操作js，在style中用 # 。

css基本样式

1.尺寸样式，设置宽高：宽width，高height。
2.位置样式：

<!-- 水平位置:margin-left; margin-right-->
<!-- 垂直位置:margin-top; margin-bottom-->
<!-- 复合写法,四个参数:上 右 下 左  -->
<!-- auto 水平位置自适应居中 -->

3.背景颜色:background-color：
颜色的3种写法：

<!-- 1.颜色的单词 -->
<!-- 2.rgb(0-255,0-255,0-255) -->
<!-- 3.16进制,由#开头,例:黑色 #000000 -->

4.文字大小：font-size：28px;
5.字体：font-family:“楷体”;

复合型选择器

<!-- 1.交集选择器,标签必须写在前面,例div.sherry -->
<!-- 2.并集选择器,选择器之间用 , 号隔开(同级) -->
<!-- 3.后代选择器,选择器之间用空格 -->
<!-- 4.子代选择器,选择器之间用大于号 -->
<!-- 5.相邻选择器,选择器之间用加号;a+a式可以达到去除首项的效果 -->
<!-- 6.兄弟选择器,选择器之间用 ~ -->
<!-- 7.选择器权重：!important > 行内样式 > id选择器 > 类名选择器，属性选择器，伪类选择器 
				> 标签选择器，伪元素选择器 > 通配符选择器，关系选择器（+ , > , ~ , "" ）,否定伪类。 -->

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="css样式 选择器">
    <meta name="description" content="css基本样式和元素选择器详解">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习_Y</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            background-color: rgb(241, 249, 249);
            margin: 0 auto;
            padding: 60px 0 0 100px;
        }
        h1,#title{
            color: rgb(80, 81,77);
            font-size: 3.5em;
            font-family: 宋体;
        }
        h2{
            color: #A1A1A1;
            font-size: 2em;
            font-family: 宋体;
            margin-top: -25px;
        }
        p{
            width: 660px;
            color: #6F6F6E;
            font-size: 1.5em;
            font-family: 黑体;
            line-height: 40px;
            margin-top: 40px;
        }
        .box>div{
            margin-top: 40px;
        }
        .box a{  
            color: #FC7C3D;
            font-size: 1.5em;
            font-family: 黑体;
            text-decoration: none;
            /* 去除标签下划线 */
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>深受1.7亿用户</h1>
        <h2 id="title">喜爱的MIUI系统</h2>
        <h2>大屏幕显示优化/单手模式/大字体模式</h2>
        <p>大屏希要有大体验! MIUI 针对5.7英寸大屏特别优化，重新调.整界面布局及交互元素，使同样的界面在5.7英寸的小米Note上比4.7英寸屏蒂多显示约25%的内容。对于喜欢更大内容的用户，也全新升级系统级大字体模式，并适配第三方应用。你可能有时单手操作手机，为此我们推出便携单手模式，使界面可以模拟更小的屏幕尺寸，单手也可以覆盖所有的操作区域。通过这些新功能，你一定会更喜欢小米Note这块5.7英寸的大屏幕。</p>
        <div>
            <a href="http://baidu.com">了解MIUI系统></a>
        </div>
    </div>
</body>
</html>