CSS(Cascading Style Sheet)Style标签，引入Css方式，Css选择器

最新推荐文章于 2024-07-15 03:22:09 发布
最新推荐文章于 2024-07-15 03:22:09 发布
阅读量668 收藏 1
点赞数
文章标签： Java学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yalu_123456/article/details/92794436
版权

初识CSS

什么是CSS

  • CSS的概念
  1. Cascading Style Sheet 层叠样式表
  2. 表现HTML文件样式的语言
  3. 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
  4. 聊聊网页中的CSS
    在这里插入图片描述

CSS的发展史

  • 1996年 CSS1.0
  • 1998年 CSS2.0
  • 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离
  • 2004年 CSS2.1
  • 融入了更多高级的用法，如浮动，定位等。
  • 2010年 CSS3.0
    它包括了CSS2.1下的所有功能， 是目前最新的版本， 它向着模块化的趋势发展，又加了很多使用的新技术， 如字体、 多背景、 圆角、 阴影、 动画等高级属性，但是它需要高级浏览器的支持。 由于现在IE 6、 IE 7使用比例已经很少， 对市场企业进行调研发现使用CSS3的频率大幅增加， 学习CSS3已经成为一种趋势.

CSS的优势

  • 内容与表现分离
  • 网页的表现统一 ， 容易修改
  • 丰富的样式 ， 使得页面布局更加灵活
  • 减少网页的代码量 ， 增加网页的浏览速度 ， 节省网络带宽
  • 运用独立于页面的CSS ， 有利于网页被搜索引擎收录

CSS的基础语法

选择器{
声明1；
声明2；
...
}

在这里插入图片描述
CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上

Style标签

Style 标签在HTML文档中的位置 ， 在<head 和 </head之间
在这里插入图片描述
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rgba(224, 183, 134, 0.69);
        }
        h2{
            font-size: 200px;
        }
    </style>

</head>
<body>
<h1>你是谁啊</h1>
<h2>我是你爸爸</h2>
</body>
</html>

引入CSS的方式

  1. 行内样式
    使用style属性引入CSS样式
    秦
  2. 内部样式表
    CSS代码写在<head的<style标签中
  3. 外部样式表
    链接式
    导入式

案例一：

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

    <!--内部样式表
    需要使用style标签
    格式 :

        选择器 {
              属性 : 属性值
        }

    -->
    <style>
        a{
            font-size: 50px;
        }

    </style>




</head>
<body>

<!--行内样式
style属性引入 ,
行内样式如果要添加多个样式 , 中间使用分号隔开
-->
<h1 style="color: #96ffe6">Hello,css</h1>
<p style="color: #ff5f5d;font-weight: bold">Hello,css</p>

<p>Hello,css</p>

<hr/>


<a href="">Goodbye,world</a>




</body>
</html>

案例二：

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

    <!--第三种导入方式:外部导入式
    需要使用  link标签
    -->
    <!--<link rel="stylesheet" href="../resources/css/Style.css">-->


    <style>
        @import url("resources/css/Style.css");
    </style>


</head>
<body>


<div>
    认真学习的样式很Cool
</div>



</body>
</html>

其中Css文件内为：

div{
    color: #ff5f5d;
    font-size: 100px;
}

span{
    color: #ff5f5d;
    font-size: 50px;
}

链接式与导入式的区别

  • <link/标签属于XHTML，@import是属于CSS2.1
  • 使用<link/链接的CSS文件先加载到网页当中，再进行编译显示
  • 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
  • @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

CSS样式优先级（就近原则）

行内样式 > 内部样式表 > 外部样式表

案例：

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


    <link rel="stylesheet" href="resources/css/Style.css">


    <style>
        span{
            color: blue;
            font-family: 楷体;
        }
    </style>


</head>
<body>



<span style="color: green">

    IT梦想

</span>




</body>
</html>

CSS基础选择器

  1. 标签选择器
    uHTML标签作为标签选择器的名称
    <h1…<h6、<p、<img/
    在这里插入图片描述
  2. 类选择器
    类选择器
    <标签名 class= “类名称”>标签内容</标签名>
    在这里插入图片描述
    案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /*   类选择器
         思考 : 需要一类 ?  类在标签中定义, 使用class属性
          然后使用类选择器选择到指定的标签元素

          .类名称{
               属性:属性值
          }

        */

        .a{
            font-family: 宋体;
        }

        .b{
            font-style: italic;
        }

    </style>

</head>
<body>


<p class="a">来西部开源</p>
<a href="" class="a">成就IT梦想</a>
<div class="a">好好学习,天天向上</div>
<span class="b">cool</span>
<br>
<qinjiang class="b">你好啊</qinjiang>


</body>
</html>
  1. ID 选择器
    在这里插入图片描述
    案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>


        /*id属性全局唯一 , 不能同名*/
        /*ID选择器
        需要一个iD --> 在标签中定义ID
        格式:

        #id名字{

        }

        */

        #goods{
            font-size: 200px;
        }

        #aaa{
            color: yellow;
        }


    </style>


</head>
<body>


<p class="a" id="aaa">1</p>
<a href=""  class="a">2</a>
<div  class="a">3</div>
<span  class="a" id="goods">4</span>



</body>
</html>

总结

  • 标签选择器直接应用于HTML标签
  • 类选择器可在页面中多次使用
  • ID选择器在同一个页面中只能使用一次

基本选择器的优先级

  • ID选择器>类选择器>标签选择器
  • 基本选择器不遵循 “ 就近原则 "

案例：

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

    <style>

        .test1{
            color: blue;
        }

        h1{
            color: red;
        }

        #test2{
            color: green;
        }


    </style>


</head>
<body>


<h1 class="test1" id="test2">hello,kitty!</h1>

</body>
</html>

CSS高级选择器3-1

  1. 层次选择器
    在这里插入图片描述
  2. 后代选择器
    在这里插入图片描述
    案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        p,ul{
            border: 1px solid red; /*边框*/
        }

        /*后代选择器
        需求 : 获取body下面的所有p标签
        使用空格隔开*/

        body p{
            background-color: green;
        }
</style>


</head>
<body>



<p class="aaa">1</p>
<p id="a">2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>3</p>


</body>
</html>
  1. 子选择器
    在这里插入图片描述
    案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        p,ul{
            border: 1px solid red; /*边框*/
        }


        /*子选择器
        需求 : 只获得body下面的第一层元素
        */
        body>p{
            background: slateblue;
        }
         </style>


</head>
<body>



<p class="aaa">1</p>
<p id="a">2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>3</p>


</body>
</html>
  1. 相邻兄弟选择器
    在这里插入图片描述
    案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        p,ul{
            border: 1px solid red; /*边框*/
        }




        /*相邻兄弟选择器  , 向下 ...
        前提 : 定位到一个元素 E
        需求 : 获取指定元素的相邻兄弟元素
                */

        #a+p{
            background: yellow;
        }
        </style>


</head>
<body>



<p class="aaa">1</p>
<p id="a">2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>3</p>


</body>
</html>
  1. 通用兄弟选择器
    在这里插入图片描述
    案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        p,ul{
            border: 1px solid red; /*边框*/
        }





        /*兄弟选择器
        前提 : 定位到一个元素 E
        需求 : 想获取指定元素的所有(指定元素下面的)兄弟元素

        格式 :

        E ~ F {
        }
        表示 : 获取指定E元素的同级元素的F标签*/

        .aaa~p{
            background: #ff524d;
        }



    </style>


</head>
<body>



<p class="aaa">1</p>
<p id="a">2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>3</p>


</body>
</html>

CSS高级选择器3-2

  1. 结构伪类选择器
    在这里插入图片描述
  2. 结构伪类选择器
    在这里插入图片描述
    案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        p,li{
            border: 1px solid red;
        }

        /*
        结构伪类选择器 :

        概念 :  伪元素和伪选择器 是CSS已经定义好的 ,我们拿来就可以用

        格式 :

        选择器 :伪元素{

        }

        伪元素 :
            :first-child -->父类的第一个子元素
            :last-child
            :
        ul li:first-child{
            background: yellow;
        }

        ul li:last-child{
            background: red;
        }

        /*需求:选择body下面的第二个元素
        E:nth-child(n) --> 需要找到E元素的父级元素 , 寻找父级元素的第n个子元素 ,
       判断他是不是E元素 , 如果不是,就不会被选择.
*/

        p:nth-child(2){
            background: blue;
        }


        /*请你选择body下面的第二个p元素
        E : nth-of-type(n)  --->找到E的父级元素 , 然后在他的父级元素中去找第n个E元素
        */
        p:nth-of-type(3){
            background: brown;
        }


    </style>



</head>
<body>

<h1>adsdas</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>




</body>
</html>

在这里插入图片描述

CSS高级选择器3-3

  1. 属性选择器
    在这里插入图片描述
    案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*给基础代码添加样式*/
        .demo a{
            float: left; /*浮动*/
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: white;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            margin: 5px;
        }


        /*属性选择器
        需要一个什么 : 属性


        a[id]{
            background: red;
        }


        a[id=name]{
            background: red;
        }


        a[href^="https"]{
            background: red;
        }


        a[href$="png"]{
            background: red;
        }

        a[class]{
            background: yellow;
        }

        a[href*="."]{
            background: yellow;
        }

*/


    </style>




</head>
<body>



<p class="demo">

    <a href="https://www.baidu.com" class="links" id="name">1</a>
    <a href=""  class="links">2</a>
    <a href="/1.png">3</a>
    <a href="/1.jpg"  class="links">4</a>
    <a href="/1.png" id="apple">5</a>
    <a href="https://blog.kuangstudy.com"  class="links">6</a>
    <a href="aaa">7</a>
    <a href="abc.doc"  class="links">8</a>
    <a href="abcd.doc" id="">9</a>

</p>


</body>
</html>
dream_Felix
关注
获取style标签和外联(link)样式表
07-03
获取style标签和外联(link)样式表 将 rules = sheet.rules; 改成 rules = sheet.rules || sheet.cssRules; 兼容FF
在style标签中引入css文件
04-05 695
在style标签中引入css文件
4.CSS选择器（1）
最新发布
ShawLee0925的博客
07-15 347
CSS选择器
css的4种引入方式--内联样式（标签内style）、内部样式表（＜style＞）、外部样式表（＜link＞、@import）
heshihu2019的博客
12-07 1528
1.内联样式（Inline Styles）：可以直接在HTML元素的style属性中定义CSS样式。
CSS系列之文件引入方式
StayAlive1887的博客
07-28 1580
在index.html需要引用main.css文件，使用link标签引入css文件，link标签的href属性指定css文件的路径，这里使用的是相对路径。 /* 这里的css文件在一个style的文件夹中，名为main.css */将css代码写在标签内，style标签可放在html文档的任意位置，一般放在标签下。color:red;>美味烧烤烤肉
CSS的四种引入方式
jadeshu的博客
12-28 724
1.内联样式[行间css]：这种方式将样式内联定义到具体的HTML元素上，用于精确控制一个HTML元素的表现。 2.内部样式[页面级css]：这种方式是通过在HTML文档头定义样式单部分来实现，在这种方式下，每批CSS样式只控制一份HTML文档。 3.链接外部样式：这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。在这种方式下，一份样式可控制多份文档。 4.导入外部样式文件：这...
CSS2.0中文手册DHTMLET-Cascading Style Sheet 2.0 中文手册
01-31
在CSS2.0中，选择器不仅限于标签选择器，还包括类选择器、ID选择器、伪类和伪元素等。类选择器以`.`开头，ID选择器以`#`开头，伪类如`:hover`用于表示鼠标悬停状态，伪元素如`::before`和`::after`用于在元素内容...
DHTMLET-Cascading Style Sheet 2.0中文手册中文沈小雨版.zip
07-07
1. **更多选择器**：除了基本的选择器如元素选择器、ID选择器和类选择器，CSS 2.0还增加了伪类选择器（如`:hover`、`:active`）、伪元素选择器（如`::before`、`::after`）以及属性选择器，增强了选择元素的灵活性。...
CSS(Cascading Style Sheet)级联样式表常用术语总结
09-22
最后，星号(*)是一个CSS选择器，它用于选择所有元素，并可以应用样式到所有这些元素。这对于全局样式设置非常有用。 以上就是CSS级联样式表中常用的一些术语和概念的总结，掌握这些基础知识点是进行网页设计和开发...
HTML-前端开发手册Cascading Style Sheet 2.0 中文手册.zip
08-19
选择器则提供了多种定位元素的方式，如元素选择器、类选择器、ID选择器以及更复杂的伪类和伪元素选择器。 在CSS2.0中，布局控制得到了显著增强，引入了浮动(float)和定位(position)的概念，这使得创建复杂的布局变...
Cascading Style Sheet 2.0 中文手册.zip
07-18
1. **选择器**：CSS2.0引入了更强大的选择器，比如类选择器（`.class`）、ID选择器（`#id`）、属性选择器（`[attr=value]`）以及伪类（`:hover`, `:active`, `:focus`等），这些都极大地增强了对元素的定位和样式...
DHTMLET - Cascading Style Sheet 2.0 中文手册
08-10
DHTMLET - Cascading Style Sheet 2.0 中文手册
style标签 引入 css 文件后，原有样式失效
java_csdnn的博客
03-20 276
引入外部css的方式
CSS（Cascading Style Sheets）（层叠样式表）
诗人密语
10-15 1873
CSS百度百科 1、CSS的基本语法 2、选择器 ①标签选择器 ②类选择器 ③id选择器 小结： 3、HTML中引入CSS样式表 ①行内样式 ②内部样式表 &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;示例&lt;/title&gt; &lt;style type...
CSS ID选择器(三)
weixin_30847865的博客
04-08 120
一、ID选择器 ID选择器使用"#"前缀标识符进行标识，后面紧跟指定的元素的ID名称。 如 #box{ width:100px; height:100px;} 元素的ID名称是唯一的，只能对应于文档中一个具体的元素。在HTML中，用来构建整体框架的标签应该定义ID属性，因为这此对象一般在页面中都是比较唯一的，固定的，不会重复，如Logo包含框，导航条，主体包含框，版权区域等。 ...
层叠样式表(Cascading Style Sheets，CSS)简介
taozpwater的专栏
07-28 3188
1、简介          层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。CSS目前最新版本为CSS5，能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的
CSS样式
weixin_43750162的博客
11-25 682
CSS 的概述 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 C...
CSS层叠样式表Cascading Style Sheets(2021.10.05)
SHY
12-19 1304
一、CSS简介 1.优缺点 优点：丰富的样式描述； 样式和结构的分离，便于维护和管理； 减少代码量，加快页面加载； 样式代码复用性强； 多个页面可以使用同一个CSS代码； 缺点：浏览器对CSS支持程度不同。 2.CSS特性 (1)继承性 1）后代元素继承祖先元素的样式(嵌套关系)； 2）只能继承文字、文本样式(如，color、text-开头、font-开头、line-开头)，其他样式不能继承。 (...
css-选择器、常见样式、标签分类
weixin_53903929的博客
08-23 1542
a:hover{}： 鼠标悬浮时（hover也可以用于其他标签）主要作用：调整标签内容的位置，但是，会导致整个标签大小的变化。a:active{}：鼠标激活时，点击未释放。常用值：left，right，both。padding：内容与边框之间的距离。清除前面浮动对后面的标签造成的影响。a:visited{}：访问过后。a:link{}：未被访问时。height：设置元素的高度。width：设置元素的宽度。提供了丰富的样式修饰内容。
CSS中的信息隐藏：RSA公钥加密的文本隐写术安全方案
通过精心设计的CSS规则，可以将一个密钥或明文消息编码成难以察觉的形式，例如，通过调整颜色值、透明度或者选择器优先级等方式，这些微妙的变化在视觉上可能几乎不可见，但通过特定的解码程序才能揭示其中隐藏的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值