CSS常用选择器

最新推荐文章于 2024-08-21 15:33:15 发布
最新推荐文章于 2024-08-21 15:33:15 发布
阅读量9.6k 收藏 20
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/forever_wen/article/details/82888289
版权

CSS （层叠样式表） 编辑

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

一.行内标签和块级元素

  1. 块级元素特点
    总是在新行上开始；
    高度、行高以及外边距和内边距都可控制；
    宽度默认是它容器的100%，除非设定一个宽度；
    可以容纳内联元素和其他块级元素。
  2. 行内元素特点
    和其他元素都在同一行；
    高，行高及外边距和内边距不可改变；
    宽度就是它的文字和图片的宽度，不可改变；
    内联元素只能容纳文本或者其他内联元素。

3.（div）和（span）相关的技术:
1). div是一个html标签, 一个块级元素(单独显示一行), 单独使用没有任何意义, 必须结合CSS来使用, 主要用于页面的布局;
2）. span是一个html标签, 一个内联元素(显示一行), 它单独使用没有任何意义, 必须结合CSS使用, 主要对括起来的内容进行样式的修饰;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span style="color: green"><div style="color: red">hello</div></span>
<div style="color: green"><span style="color: red">hello</span></div>


<span style=" border: 1px solid red; text-align:center">hello</span><br/>
<span style="width: 200px; height: 200px; border: 1px solid chartreuse">world</span><br>
<div style="width: 100px; height: 100px; border-radius:25px;border: 1px solid blueviolet;
    box-shadow: 1px 1px 3px #888888;">hello</div><br>
<div style="width: 100px; height: 100px; border: 1px solid aquamarine">world</div>
he<strong>llo</strong><br>
<span>hello</span><br>
 <!--margin: 0 auto; 就是上下距离为0, auto就是左右自适应两边距离一样-->
<div style="text-align: center; width: 100px; height: 100px; border-radius:25px;
border: 1px solid blueviolet; margin: 0 auto">hello</div>

</body>
</html>

在这里插入图片描述

3.总结:

  1. 学习的行内标签和 块级元素分别有哪些?
    行内标签:span, strong, a, img, input, textarea
    块级元素:div, h1-h6, p, hr, pre, ul, ol, dd, dt, th. tr, td
  2. 两者的区别与特性；
    1).块级元素独占一行空间， 行内元素只占据自身宽度的空间;
    2).块级元素是可以包含块级元素和行内元素; 行内元素只能包含文本信息和行内元素;
    3). 块级元素可以设置宽和高， 行内元素设置的宽和高失效；
  3. 如何让块级元素居中? 如何让行内元素居中?
    1); 块级元素居中： margin: 0 auto
    2> 行内元素居中: text-aligin:center

二.CSS 样式_标签选择器

基本格式：
在（title）标签下部建立（style）标签（CSS的标签选择器），
再在（style）标签内先给某一种标签建立属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
          <!--CSS的标签选择器-->
    <style>
        div{
            width:100px;
            height: 100px;
            border-radius:25px;
            border: 1px solid blueviolet;
            text-align: center;
            margin: 0 auto;
            padding-top: 20px;
            text-shadow: 5px 5px 5px gray;
        }
    </style>
</head>
<body>

<div>1</div>
<div>2</div>
<div>3</div>

</body>
</html>

在这里插入图片描述

三.CSS样式_类选择器

基本格式：
在（body）中为某些需要的标签定义类
在（title）标签下部建立（style）标签（CSS的标签选择器），
再在（style）标签内先给某一种标签建立属性
给该种标签的某一类设置新的属性（类名前加‘.’）

注：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
定义的类中会覆盖掉之前定义的相同的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
          <!--CSS的标签选择器-->
    <style>
        div{
            width:100px;
            height: 100px;
            border-radius:25px;
            border: 1px solid blueviolet;
            text-align: center;
            margin: 0 auto;
            padding-top: 20px;
            text-shadow: 5px 5px 5px gray;
        }

        /*选择div标签中类名为important的进行设置下面的样式*/
        .important {
            width: 20px;
            height: 20px;
            font-size: large;
            border-radius:25px;
            border: 1px solid blueviolet;
        }
    </style>
</head>
<body>

<div class="important">1</div>
<div>2</div>
<div class="important">3</div>
<div>4</div>
<div class="important">5</div>

</body>
</html>

在这里插入图片描述

四.CSS样式_id选择器

基本格式：
在（body）中为某些需要的标签定义id
在（title）标签下部建立（style）标签
再在（style）标签内给某一种id建立属性（id名前加“#”）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
          <!--CSS的标签选择器-->
    <style>
        #westos{
            width:100px;
            height: 100px;
            border-radius:25px;
            border: 1px solid blueviolet;
            text-align: center;
            margin: 0 auto;
            padding-top: 20px;
            text-shadow: 5px 5px 5px gray;
        }
    </style>
</head>
<body>


<div style="text-align: center">1</div>
<div id="westos">2</div>
<div style="text-align: center">3</div>

</body>
</html>

在这里插入图片描述

五.CSS样式_层级选择器

顾名思义，就是给一层下的某层标签设置属性 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       ul li a {
           color: red;
       }

       input[type='submit']{
           background: palevioletred;
            width: 200px;

       }

    </style>

</head>
<body>

<ol>
    <li><a href="#" > 新闻1</a></li>
    <li><a href="#"> 新闻2</a></li>
    <li><a href="#"> 新闻3</a></li>
</ol>

<ul>
    <li><a href="#"> 新闻1</a></li>
    <li><a href="#"> 新闻2</a></li>
    <li><a href="#"> 新闻3</a></li>
</ul>

<form>
    姓名: <input type="text"><br/>
    密码: <input type="password"><br/>
    <input type="submit" value="注册">
</form>
</body>
</html>

在这里插入图片描述

六.CSS样式的引入方式

1.行内引入
(a style=“行内引入的样式”)
2.内部引入
写在head标签里面的style标签里面的样式;
3.外部引入
外部引入CSS样式文件是通过标签实现的，它只能位于HTML文档的head标签内，且必须有href属性，用于指定需要引入的CSS文件的绝对路径

<link type="text/css" rel="stylesheet" href="CSS样式文件的绝对地址">

三种引入方式的优先级: 就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            background: red;
        }
    </style>
    <link rel="stylesheet" href="css/main.css">

</head>
<body>
<div>
    <ul>
        <li style="background: blue">
            <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
        </li>
        <li>CSS</li>
        <li>JS</li>
        <li>python</li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

该程序为“css/main.css”中的内容

div {
    width: 80%;
    margin: 0 auto;
    padding: 0;

}

ul {
    list-style-type: none
}

li {
    display: inline-block;
    width: 20%;
    background: snow;
    color: #333333;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: large;
    text-transform: capitalize;
}

li:hover {
    background: green;
    color: snow;
}

a:hover {

    color: snow;

}

其中

  li:hover {
            background: green;
            color: snow;

选择鼠标指针浮动在其上的元素，并设置其样式

forever_wen
关注
CSS常用的选择器
m0_70273331的博客
04-29 229
一般写法：#divBox p .red{color:red;} 更好写法：.red{..} 使用class代替层级关系 一般写法：#divBox ul li a{display:block;} 更好写法：.block{display:block;} [](()必须记住的30类CSS选择器 大概大家都知道“id”,“class”以及“descendant”选择器，并且整体都在使用它们，那么你正在错误拥有更大级别的灵活性的选择方式。下面提到的大部分选择器都是在CSS3标准下的，所以它们只能在相应最新版本的浏
CSS-常用的选择器
paku-san的博客
05-19 1458
六种常用的选择器准备工作1、id选择器2、class选择器(类选择器)3、标签选择器4、通配符5、分组选择器6、后代选择器7、伪类选择器 准备工作 使用div标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> &l...
2024最强CSS基础知识大全（含代码）
最新发布
HTDiiii的博客
08-21 1503
CSS 什么是 CSS CSS(Cascading Style Sheets) 指层叠样式表，样式定义如何显示 HTML 的样式，样式通常存储在样式表中，把样式添加到 HTML5 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可以层叠为一。 什么地方可以写 css 行内样式，在标签内部通过 style 属性编写的 CSS 样式就是行内。 内嵌样式，一般在页面中的 head 标签内通过外部 css 标签 通过在页面中的 标签中使用 标签
css常用的选择器
m0_61973596的博客
07-10 624
css常用的选择器
选择器（尚硅谷前端网课学习笔记）
ENT_jingchui的博客
12-02 335
关系选择器 1 子元素选择器 作用：选中指定父元素的指定子元素 语法： 父元素 ＞ 子元素 2 后代元素选择器 作用：选中指定元素内的指定后代元素 语法： 祖先 后代 3 兄弟选择器 （1）作用：选择下一个兄弟 语法： 前一个 + 后一个 （2）作用：选择下边所有的兄弟 语法： 前一个 ～ 后一个 ** 属性选择器 ** ［属性名］ 选择含有指定属性的元素 ［属性名=属性值］ 选择含有指定属性和属性值的元素 ［属性名^=属性值］ 选择属性值以指定值为开头的元素 ［属性名$=属性值］ 选择属性值以指定值为结尾
CSS中的常见选择器
Java 技术专栏，从入门到精通，熟悉企业级开发
03-09 2930
本文介绍了CSS中的常见选择器，选择器的出现可以让我们实现对具体的元素标签进行定制，因此我们要掌握好各类选择器的使用。
详解css常用选择器
12-08
以上就是CSS常用选择器的详细解释，熟练掌握这些选择器可以帮助开发者更精确地控制网页元素的样式，提高代码的可维护性和效率。在实际开发中，可以根据需求灵活运用，创建美观且功能丰富的网页。
四种CSS常用的选择器使用方法和注意事项
12-04
本文将详细介绍四种常用的CSS选择器：类选择器、ID选择器、HTML元素选择器和通配符选择器，并提供相应的使用方法和注意事项。 1. 类选择器（Class选择器） 类选择器通过在元素前加上`.`符号来指定。例如，`.s1`就是...
css选择器详解
热门推荐
王浴昊
05-23 1万+
1、元素选择器 2、类选择器 3、ID选择器 4、属性选择器 5、派生选择器 1、元素选择器最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。用法十分简单，例如：html {background-color: black;} p {font-size: 30px; backgroud-color: gray;}
css中常用的选择器
ITsource
06-13 785
首先我们要了解一个概念，就是什么是选择器，以及选择器的作用？ css的作用是修饰html标签，美化页面的。既然要修饰html标签 ，那首先就要选择到要被修饰的标签，如何进行选择，那么就要使用选择器。选择器其实就是一种匹配模式，主要用于选择中要被修饰的标签。今天给大家介绍css中一些常用的选择器。 标签选择器 标签选择器又称为类型选择器，作用就是修饰指定的标签。 ...
CSS-常用选择器
qq_43681073的博客
05-17 595
转载防丢失，原文链接： CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器…），你知道多少？ CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！ 一、通配符选择器 通配符选择器常用 ‘*’ 号表
CSS 常用选择器
叶落的厕所
10-21 227
在CSS中，“ * ”符号为通配符选择器的定义，它表示选取页面中所有元素。
css常用选择器
weixin_53533170的博客
03-31 1540
CSS常用选择器 基本选择器 1.元素选择器 语法：元素名{属性:属性值;} 特点：选中页面上所有对应元素名的元素 例： p{ color:red; } 2.类选择器 语法：.类名{属性:属性值;} 特点：选中页面上拥有该类名的元素 注：一个元素可以有多个类名 例： .box{ font-size:40px; } 3.id选择器 语法：#id名{属性:属性值;} 特点：选中页面上拥有该id名的元素 注：一个元素只能有一个id名，一个id名只能在页面上出现一次 例： #box{ font-we
css常用选择器（一）
aicsswo的博客
03-17 2155
类选择器（.class）ID选择器（#id）元素选择器（element）后代选择器（element element）子元素选择器（element > element）伪类选择器（:hover, :first-child, :nth-child(n), :not(selector), :checked, :disabled等）伪元素选择器（::before, ::after, ::first-line, ::first-letter等）
css常见选择器
爱玩亚索的程序员
03-16 801
文章目录基础选择器元素选择器id选择器class选择器群组选择器包含选择器进阶选择器伪类选择符子选择符兄弟选择符属性选择符结构伪类选择符伪元素选择符 基础选择器 元素选择器 div { width: 500px; height: 300px; background-color: green; border: 10px dashed red; } <div>div1</div> 元素选择符(类型选择符、element选择符) 权重：000
CSS常见选择器
qq_63218110的博客
12-04 2866
本篇博客主要介绍CSS的引入方式，选择器，常见的元素属性，以及弹性布局
css选择器常用语法代码
03-14
以下是一些常用的CSS选择器语法代码： 1. 元素选择器：通过元素名称选择HTML元素。 示例：`p` 选取所有 `<p>` 元素。 2. 类选择器：通过类名选择HTML元素。 示例：`.my-class` 选取所有具有 `my-class` 类的元素...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值