day01_CSS入门

2021/8/8 6:36:27

编程Tag： 选择器属性标签 css 样式入门 id day01

本文主要是介绍day01_CSS入门，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

CSS 简介

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。
CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离。

引入CSS样式方式

方式一：行内式（内联样式）

实际上任何HTML标签都拥有style属性。我们可以通过标签的style属性来设置元素的样式。其基本语法格式如下：

<!--
            行内式引入 
            借助标签的style属性引入
            style属性中的值语法为  样式名:样式值; 样式名:样式值;... ...
        -->
        <span style="font-size: 40px; color: blue; background-color: aqua;">
            欢迎
        </span>

注意：

style其实就是标签的属性
样式属性和值中间是:
多组属性值之间用;隔开。
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
缺点：没有实现样式和结构相分离

方式二：内部样式表（内嵌样式表）

tyle标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。其基本语法格式如下：

        <!--
            内嵌式
            将css样式的代码抽取出来,通过选择器确定样式作用范围
            在head标签中  使用一对style标签 定义css样式
            在style标签中 注释写法  /*   */
            减少相同代码的编写量  减少代码的维护工作量
            
        -->
        <style>
            /* 选择器 */
            span{
                font-size: 20px; 
                color: green; 
                background-color: bisque;
                font-family: "微软雅黑";
            }
        </style>

注意：

type="text/css" 在html5中可以省略。
只能控制当前的页面,没有彻底分离

方式三：外部样式表（外链式）

将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

        <!--
            3链接式
            行内式只能将样式作用于当前标签
            内嵌式可以将样式作用于多个标签不能作用于其他网页
            链接式可以将样式的作用范围扩大多个不同网页
            链接式可以将CSS代码放入独立的.css文件中 可以使当前页面更加简洁
            每一个需要引入样式 的HTML 在head标签中使用 link标签引入css文件即可
    
        -->
        <link  rel="stylesheet" href="css/mycss.css" />

注意：

link 是个单标签
link标签需要放在head头部标签中，并且指定link标签的三个属性

三种样式表总结

当三种引入方式同时作用于同一个标签如果样式有冲突谁的优先级更高优先级原则，就近原则

CSS选择器

作用：选择标签用的，把我们想要的标签选择出来也就是找到特定的HTML页面元素

标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。语法如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 选择全部的div标签，样式对所有的div标签都有效果 */
        div {

            color: red;
        }
        span {
            /* 选择全部的span标签，样式对所有的span签都有效果 */
            color: green;
        }

    </style>
</head>

优缺点：

是能快速为页面中同类型的标签统一样式：
不能设计差异化样式。

id选择器

id选择器使用#进行标识，后面紧跟id名。其基本语法格式如下：

id特点

元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法基本和类选择器相同。
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。在js中会因为id的命名冲突而导致报错。每个标签只能有一组id

<style>
            /*
             id选择器
             一般body中的任何一个标签都有id属性
             id属性的值一般在同一个网页上是不允许有重复值
             id属性一般用于帮助我们定位到页面上唯一的一个标签
             id属性值命名有规则
             不能有空格和一些特殊符号 
             特殊符号中仅可以使用_   不推荐 $ 会和jquery命名冲突 
             不能以数字为开头
             推荐写法  应为字母开头 数字放在后面
             语法: #id值{样式}
             */
            #p1{
                border: 1px dotted blue;
                background-color: gray;
                color: red;
                width: 100px;
                height: 100px;
            }
            
        </style>

类（class）选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.语法如下

我们在可以在标签中自己定义类名。规定元素的类的名称。如需为一个元素规定多个类名，用空格分隔类名。命名的规则：与id的命名规则完全一样

<style>
    
            /*
             类选择器
             一般body中的所有标签都有class属性
             多个不同的标签可以有相同的class属性值
             通过标签的class属性确定样式的作用范围
             语法  .class属性值{样式}
             */
            .c1{
                background-color: cadetblue;
                font-size: 50px;
                font-family: "微软雅黑";
                color: black;
                text-decoration: none;
            }
            
        </style>

通配符选择器

通配符选择器用*号表示， * 就是选择所有的标签 ,他是所有选择器中作用范围最广的，能匹配页面中所有的元素。会匹配页面所有的元素，降低页面响应速度，不建议随便使用。其基本语法格式如下：

例如:下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

其它选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*
             层级选择器
             通过层次关系定位样式的作用范围
             层级选择器的每个层级的确定可以是标签名 id class
             * */
            #p1 .s1{
                color: red;
            }
            /*
             * 属性选择器
             * 根据标签的某个属性的特定属性值确定样式的作用范围
             */
            input[type=password]{
                width: 300px;
                height: 40px;
            }
        
            /*
             * 分组选择器
             * 可以将多个不同层级关系 不同class属性 id 标签名同时使用相同的样式效果
             * */
            h1,.ch,.s2,#pa{
                color: green;
            }
        </style>
    </head>
    <body>
        <span>今日全国新增确诊人数为143人</span>
        <p id="p1">
            <font>
                <span class="s1">其中湖北新增确诊134</span>
            </font>
            
            <span >非湖北新增9例</span>
        </p>
        
        <input class="i" type="text" />
        <input class="i" type="password" />
        <input class="i" type="password" />
        <input class="i" type="password" />
        
        <h1 id="ha">今日疫情通报</h1>
        <h2 class="ch">今日疫情通报</h2>
        <span class="s2">今日疫情通报</span>
        <p id="pa">今日疫情通报</p>
        
    </body>
</html>

其他选择器可以去https://www.w3school.com.cn/css/css_selectors.asp 查询

这篇关于day01_CSS入门的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

day01_CSS入门

引入CSS样式方式

方式一：行内式（内联样式）

CSS选择器

id选择器

类（class）选择器

相关编程文章