day52 css选择器和特性

最新推荐文章于 2024-03-12 18:03:31 发布
最新推荐文章于 2024-03-12 18:03:31 发布
阅读量108 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinlingjishu/article/details/108689832
版权

1.css介绍

一 什么是CSS
CSS全称Cascading Style Sheet层叠样式表，是专用用来为HTML标签添加样式的。
样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等
层叠属于CSS的三大特性之一，我们将在后续内容中介绍
表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里
二 为何要用CSS
在没有CSS之前，我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性，如下
这么做的缺点是
1、记忆困难：需要记忆每个标签的所有样式相关属性，如果标签没有某个样式相关的属性，那么设置了也没有效果
2、代码耦合度高：HTML语义与样式耦合到一起
3、扩展性差：当某一类样式需要修改时，我们需要找到所有设置了该样式标签进行修改于是CSS应运而生，很好地解决了以上三个问题

2.css的导入方式

1.行内式
2.嵌入式
3.外链式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外链式 -->
    <link rel="stylesheet" href="css/a.css">
    <!--嵌入式    -->
    <style>
        p {
            color: green;
            font-size: 30px;
        }
    </style>
    <!--导入式(了解)
    <style>
        @import url("css/a.css");
    </style>
    -->
</head>
<body>
<p>你好呀</p>

<!--行内式-->
<!--<p style="color: red;font-size: 50px">你好呀</p>-->
</body>
</html>

3.css标签选择器和*号通配符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*
        p {
            color: red;
        }
        */

        * {
            color: red;
        }
    </style>
</head>
<body>
<p>第一层</p>
<h1>哈哈哈</h1>
<a href="">点我啊</a>
<ul>
    <li>
        <ul>
            <li>
                <ul>
                    <li>
                        <p>千层饼</p>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
</html>

3.css ID选择器和类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器*/
        /*
        #p2 {
            color: red;
        }
        */


        /*类选择器*/
        /*
        .p3 {
            color: red;
        }
        */

        .p1 {
            color: red;
        }
        .p2 {
            font-size: 50px;
        }
        .p3 {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<!--
<p>111</p>
<p id="p2">222</p>
<p class="p3">333</p>
<p class="p3">444</p>
-->

<!--
段落1和3颜色为red
段落2和3字体大小为50px
段落1和2的字体加上下滑线

-->
<p class="p1 p3">两只黄鹂鸣翠柳</p>
<p class="p2 p3">一行白鹭上西天</p>
<p class="p1 p2">两岸猿声啼不住</p>

</body>
</html>

4.css 兄弟选择器和后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器
        p {
            color: red;
        }
        div p {
            color: red;
        }后代选择器
        div+p {
            color: green;
        }相邻兄弟选择器（紧密相连）找到DIV后面的兄弟，前面找不到
        div~p {
            color: green;
        }毗邻兄弟选择器
        div>p {
            color: red;
        }儿子选择器
         */
        .box1 ul p {
            color: red;
        }后代选择器
    </style>
</head>
<body>
<p>1111</p>
<div class="box1">
    <ul>
        <li>
            <p>你要呀</p>
            <p>你要呀</p>
            <p>你要呀</p>
        </li>
    </ul>

    <p>333333</p>
</div>
<hr>
<p>22222</p>

<div>
    <ul>
        <li>
            <p>我不要</p>
        </li>
    </ul>

    <p>死鬼</p>
</div>
</body>
</html>

5.交集与并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.box1 {
            color: red;
        }
        /*
        div,h1 {
            color: red;
        }
        */
    </style>
</head>
<body>
<div class="box1">
    <p>11111</p>
    <a href="#">点我啊</a>
</div>
<h1 class="box1">哈哈哈哈</h1>
</body>
</html>

6.序列选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        p:first-child {
            color: red;
        }

        p:last-child{
            color: red;
        }

        p:nth-child(3) {
            color: red;
        }


        p:first-of-type{
            color: red;
        }

        p:last-of-type{
            color: red;
        }

        p:nth-of-type(3){
            color: red;
        }

        p:only-child {
            color: red;
        }

         */
        p:only-of-type {
            color: red;
        }
    </style>
</head>
<body>
<h1>w我是标题</h1>
<p>我是段落1</p>
<h1>aaaaaa</h1>
<p>我是段落2</p>
<p>我是段落333333333333333333333333333333333333333333</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <hr>
    <a href=""></a>
    <p>我是段落6</p>
    <p>我是段落6</p>
    <p>我是段落6666666666666666666666666666666666666666</p>
    <p>我是段落6</p>
    <p>我是段落7777777</p>
    <ul>
        <li>
            <a href=""></a>
            <p>111111111111111</p>
            <p>111111111111111</p>
            <table></table>
        </li>
    </ul>
    <hr>
    <hr>
    <hr>
    <hr>
</div>
</body>
</html>

7.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        /*[x] {*/
        /*    color: red;*/
        /*}*/

        /*[class*="part1"] {*/
        /*    color: red;*/
        /*}*/

        /*[class^="aa"] {*/
        /*    color: red;*/
        /*}*/

        /*[href$="com"] {*/
        /*    color: red;*/
        /*}*/

        .inp1[type="text"] {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<input type="text" class="inp1">
<input type="text">
    <h1 id="id1" type="text">哈哈啊</h1>
    <p id="id2" x="111">我是段落111</p>
    <p class="aaapart1 part2" x="222">我是段落222</p>
    <p class="xxx part2 yyy">我是段落3333</p>
    <p class="part1asdf" x="222">我是段落44444</p>

    <a href="#">我是我</a>
    <a href="http://www.baidu.com">点1</a>
    <a href="https://www.baidu.com">电2</a>
    <img src="1.png" alt="">
    <img src="2.jpg" alt="">
    <p>我是段落</p>
    <p>我是段落</p>
</body>
</html>

8.伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>根据链接标签点击前后进行选择器标记
        a:link {
            color: red;
        }
        a:hover {
            color: green;
            font-size: 50px;
        }
        a:active {
            color: blue;
        }
        a:visited {
            color: yellow;
        }

        input:focus {
            background-color: red;
            outline: none;
        }
    </style>
</head>
<body>

<a href="http://www.baidu.com">点我啊小胡总</a>
<input type="text">用户名
</body>
</html>

9.伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p:first-letter {*/
        /*    font-size: 20px;*/
        /*}*/

        div:before {
            content: "*";
            color: red;
        }
        div:after {
           content: "?";
            color: red;
        }
        .p1~.p2{
            color: red;
        }

    </style>
</head>
<body>
<p class="p1">111</p>
<hr>
<p class="p2">222</p>
</body>
</html>

10.css三大特性

1.继承
2.层叠性
3.优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
        /*    color: red;*/
        /*    font-size: 20px;*/
        /*}*/

        /*div a {*/
        /*    text-decoration: none;*/
        /*}*/


        /*div li {*/
        /*    color: red;*/
        /*}*/
        /*div ul {*/
        /*    color: green;*/
        /*}*/

        .p1 {
            color: red !important;
            font-size: 20px !important;
        }
        .p1 {
            color: green;
            font-size: 10px;
        }


    </style>
</head>
<body>
<div>
    <ul>
        <li>
            <p class="p1">1111</p>
        </li>
    </ul>

</div>
</body>
</html>
技术承
关注
前端CSS
haizheguaishou的博客
07-23 709
CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 CSS代码语法 p（选择器）{color（属性）:blue（值）} 选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。 声明：在英文大...
day22css选择器和简单爬虫
chaichaishufen的博客
03-15 699
day22css选择器和简单爬虫 1css常用标签 1多行文本输入框：textarea <textarea rows="3" cols="" placeholder="输入提示信息" maxlength="">123213</textarea> 2下拉列表：select-option <select> <option value ="">沉脉</option> <option value ="">浮脉</option
css：style样式
paradoxaaa_的博客
09-23 4146
css样式有文档内嵌样式（内联式）、外部引用样式（外联式）、元素内嵌样式（行内式）三种。 内联式：<style type="text/css"> #box { width: 600px; height: 500px; background: red; } </style> 外联式： <link re...
CSS格式
ilinda的博客
08-25 1870
<style type="text/css"> 标签名称{ 属性名称: 属性对应的值; ... }</style> 注意点: ·style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系) ·style标签中的type属性其实可以不用写, ...
CSS-style的三种方式(内联、嵌入、外部)
热门推荐
qq_38345598的博客
01-27 3万+
一、内联式 一般都写在特定的标签元素里面来实现对元素的修改。例如将    人生应该奋斗不止的字体颜色设置为红色 人生应该奋斗不止 并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码： 这里文字是红色。二、嵌入式 嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。如下面的代码将文字设置为粉
前端学习2——CSS3
gyfghh的博客
08-22 594
div {}描述符值描述name必需。定义字体名称。srcURL必需。定义字体文件的 URL。可选。定义应如何拉伸字体。默认值是 “normal”。font-style可选。定义字体的样式。默认值是 “normal”。可选。定义字体的粗细。默认值是 “normal”。可选。定义字体支持的 UNICODE 字符范围。默认值是 “U+0-10FFFF”。animation-name属性指定动画的名称animation-duration属性指定动画运行时间div {.........
day03（CSS01-基础选择器+字体文本样式）.rar
12-01
本压缩包“day03（CSS01-基础选择器+字体文本样式）.rar”显然是一个关于CSS学习资源的集合，主要涵盖了基础选择器和字体文本样式的概念与应用。下面我们将深入探讨这两个关键知识点。 **一、基础选择器** 1. **...
day04（CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性）.rar
12-01
在"day04（CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性）"这个课程中，我们将深入探讨CSS选择器的高级用法，以及元素的背景设置、显示模式和CSS的三大特性。 首先，让我们来看看选择器进阶。基础的选择器...
练习前端-CSS引入、基础选择器-day04
08-31
- ID选择器的权重最高，其次是类选择器，再是元素选择器，最后是通配符、属性和伪类选择器。优先级计算涉及每个选择器类型的计数，最后通过比较数值决定哪个样式生效。 4. **CSS盒模型**： - 包括`content`...
Day 3:CSS选择器查找元素
LSMSMD0526的博客
07-21 3191
CSS选择器查找元素一、哪些情况不能用ID选择器二、CSS选择器语法三、ID选择器查找元素四、class选择器查找元素五、通配符定位六、查找子节点 一、哪些情况不能用ID选择器 元素的ID不唯一，或者ID是动态变化的 name以及linktext属性值不唯一 如果满足上述条件，则不能用ID选择器来定位元素，就需要依靠xpath或CSS来定位元素了 PS：不管使用什么方式来查找元素（比如id、name、xpath、CSS等），都需要确保页面上查找出来的元素的唯一性，应该只找到一个匹配的node（如何查看是
CSS设置style属性的3种方法
韬光养晦
09-14 1万+
CSS：层叠样式表 可以将css样式编写到元素的style属性当中： 1.将样式直接写到style属性中，这种样式我们称为内联样式，内联样式只对当前的元素中的内容起作用，内联样式不方便复用，不推荐使用。 eg： <p style="color:blue;font-size: 50px;">明月几时有，把酒问青天！</p> 2.也可以将CSS样式编写到head中的style...
CSS基础知识
qq_51029472的博客
07-09 1524
一、基础认知 1.1 CSS初识 CSS写在style标签中，style标签一般写在head标签里面，title标签下面 ctrl+/ CSS注释快捷键 选择器 {css属性} 2.1 CSS引入方式 内嵌式：CSS写在style标签中 提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中 作用：当前页面 外联式：CSS写在一个单独的.css文件中 作用：多个页面 提示：需要通过link标签在网页中引入 行内式：CSS写在标签的style属性中 写法：style=“属性：属性值”
1.1 css style 样式定义：行内 style 属性、单页 ＜style＞ 标签、多页 ＜style＞ 标签
一个字，学
03-15 7484
把长宽等样式定义在某个标签的属性中，仅对当前标签产生影响，如：style 里面不能省略掉像素单位 px两种定义属性的方式：不用 style：用 style：此时一般把 定义在 标签里面：标签中的样式可以对该页面的同一类/多类元素产生影响：除了直接对某类标签统一设置样式，还可以结合 class 属性分类设置样式：class 类名可以多个组合在一起： 3.多页 标签：对多个页面产生影响 在 css 文件夹中新建 文件，把单页 标签里面的内容剪切进来，然后回到 标签 里面添加 标签，就能对多个页面产
前端CSS3--三大样式
weixin_45981384的博客
08-24 1311
一、内联式css样式 内联式css样式表就是把css代码直接写在现有的HTML标签中，css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：如下面代码： <p style="color:red;font-size:12px">这里文字是红色。</p> 二、嵌入式css样式 嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。代码如下：
CSS样式
m0_59708269的博客
01-19 1979
css(Cascading Style Sheets):层叠样式表 解决html写样式的弊端 特点:实现了样式和内容的分离 语法: 1.原本写在html标签中依然可以实现 <div style="color:red;">我是默认的方式</div> 2.写在head表中 <style> /* 语法 选择器{ 属性:值; 属性2:值2; ..... } */ p
CSS基本知识点
weixin_44309299的博客
03-01 486
CSS基本语法 css:层叠样式表 （Cascading Style Sheets） 引入css方式 行内样式 直接使用标记的style属性 style=" width:100px; height:100px; background-color:#F00;” 内嵌样式 在HTML中，使用<style></style>标记，将样式写在<style>标记内 注意：<style>标记要指定type属性为text/css 链接样式(外链式) 将CS
CSS入门
Hua
07-29 311
httpsCSS特点美化网页一般称为CSS样式表。
CSS样式技巧 --- 下
weixin_53072248的博客
09-03 470
长度和高度中长的那条边跟容器大小一致，短的那条等比缩放，可能会有留白。scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。同时需要注意的是line-height的高度基于font-size（即字体的高度），如果文字要转行会出现异常。在使用vertical-align:middle实现垂直居中的时候，经常会发现不生效的情况。
CSS的使用方式
最新发布
NanandV1的博客
03-12 911
我们把背景颜色（banckground）改为的是黄色（yellow），字体颜色（color)改成绿色(green)。在head里面加入h1背景颜色蓝色（blue）字体颜色red（红色）我们在body输入内容就可以了。文字水平对齐方式：text-align=“属性”可以填入strat（左对齐）end（右对齐）center（中间）在标签中加入class属性，class=“类名”在class中通过类名的形式去写样式。边框为四个边，我们还要设置边框颜色，尺寸，材质（线条）四、通过class类名称获取标签。
CSS基础：样式表分类与选择器详解
“YK-Day04笔记.pdf”涵盖了CSS基础知识，包括CSS的定义、分类（内联样式、内部样式和外部样式）以及常用选择器的介绍。 CSS（层叠样式表）是用于美化和控制HTML网页外观的重要工具。它允许开发者通过定义不同的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值