带你快速认识掌握CSS详解 (一)

谁践踏了优雅 2023-02-20 13:56 8阅读 0赞

今天这一篇, 让我们快速去认识一下CSS吧~~活不多说, 煌sir直接上货~~

# CSS样式 #

> javaEE程序员对CSS的最高要求：
> 
> ①基本看懂美工人员写的CSS代码
> 
> ②拿着别人的CSS代码，可以进行简单修改
> 
> ③可以书写简单的CSS样式

# #

# 一. **简述及入门** #

**HTML：肉体**

**CSS：给肉体穿衣服/给肉体化妆**

**CSS作用：修饰HTML页面，更丰富多彩地展示超文本信息**

入门案例：

<font size="7" color="blue">今天天气不错</font>
    <br/>
    <font color="red" style="font-size:1000px;">今天天气不错</font>

每个标签都有style属性，style属性中可以书写css代码的。

*  Css代码格式：

**       属性名:属性值;**

*  举例使用:

<style>
            /* CSS注释：等同于Java的多行注释*/
            font{
                font-size:120px;
                color:red;
                border:3px solid blue;
            }
        </style>
    </head>
    <body>
        <font>今天天气不错</font>
        <font>今天天气不错</font>
        <font>今天天气不错</font>
    </body>

## 总结： ##

> 1.  **CSS注释，等同于Java的多行注释**
> 2.  **<head>中<style>标签，<style>标签中写css代码**
> 3.  **Css代码：**
> 
>  
> 
> **选择器名称\{** 
> 
> **属性名1:属性值1;**
> 
> **属性名2:值1 值2 值3;**
> 
> **\}**

# 二. **选择器** #

选择器：指定某段CSS代码作用在哪些标签上。

## 1.元素选择器 ##

元素选择器：指定某段CSS代码作用在 哪些指定名称的标签上。

> 格式：
> 
> 元素名\{ 
> 
> CSS代码
> 
> \}

举例使用:

<style>
            span{
                color:red;
            }
        </style>
    </head>
    <body>
        <span>111111-红色</span>
        <span>222222-红色</span>
        <div>333333</div>
        <font>44444</font>
    </body>

**适用于：相同的CSS样式，作用在某一种标签上。**

## 2.类选择器 ##

**所有的HTML标签，都有一个class属性。**

**<标签名 class=”类名”>**

**类选择器：指定某段CSS代码 作用在 指定类名的标签上**

> 格式：
> 
> .类名\{ 
> 
> CSS代码
> 
> \}

举例使用:

<style>
            .redF{
                color:red;
            }
        </style>
    </head>
    <body>
        <span>span1：我是黑色</span>
        <span class="redF">span2：我是红色</span>
        <div>div：我是黑色</div>
        <div class="redF">div2：我是红色</div>
    
    </body>

适用于：不同标签作用相同样式

## 3.ID选择器 ##

**所有标签都有id属性**

**<标签名 id=”编号”>**

**尽量保证：id在当前页面是不重复、唯一**

**ID选择器：指定某段CSS代码  作用于  某个指定ID的标签上。**

> 格式：
> 
> **\#ID****值\{** 
> 
> **Css****代码**
> 
> **\}**

举例使用:

<style>
            #d1{
                color:red;
            }
            #d2{
                color:blue;
            }
        </style>
    </head>
    <body>
        <span>span1：我是黑色</span>
        <span>span2：我是黑色</span>
        <div>div1：我是黑色</div>
        <div id="d1">div2：我是红色</div>
        <div id="d2">div3：我是蓝色</div>
    </body>

适用于：将某一样式 针对性地作用于 某一标签上。

## 4.**扩展：属性选择器** ##

>  *  格式：
> 
> **标签名****\[属性名=****’属性值’****\]**\{
> 
> /\*css样式代码\*/
> 
> \}

举例使用:

<style>
            font[size='7']{
                color:red;
            }
        </style>
    </head>
    <body>
    
        <font size="3">黑色字体1111</font>
        <font size="5">黑色字体2222</font>
        <font size="7">红色字体</font>
    
    </body>

## 5.**扩展：包含选择器** ##

>  *  格式：
> 
> **选择器****1 选择器2** …..\{
> 
> /\*css样式代码\*/
> 
> \}

意思为：搜索选择器1 下的所有的  选择器2

*  举例使用:

<style>
            div font{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>
            <span>
                <font>变为红色字体111</font>
            </span>
            <font>变为红色字体222</font>
            黑色字体111
        </div>
        <font>黑色字体222</font>
    
    </body>

## 6. **扩展：子对象选择器** ##

>  *  格式：
> 
> **选择器****1>选择器2** …..\{
> 
> /\*css样式代码\*/
> 
> \}

意思为：搜索选择器1 下的所有的子标签  选择器2

*  举例使用:

<style>
            div>font{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>
            <span>
                <font>黑色字体111</font>
            </span>
            <font>变为红色字体111</font>
            黑色字体222
        </div>
        <font>黑色字体333</font>
    </body>

看完恭喜你,又知道了一点点!!!

**你知道的越多,不知道的越多! **

**~感谢志同道合的你阅读,  你的支持是我学习的最大动力 ! ****加油 ,陌生人一起努力,共勉!!**

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关一篇文章带你认识重构

文章目录一、重构的目的：为什么要重构（why）？二、重构的对象：到底重构什么（what）？三、重构的时机：什么时候重构（wh

系统管理员/ 2024年03月24日 19:44/ 0 赞/ 65 阅读

相关一篇文章带你掌握MongoDB

文章目录 1. 前言 2. MongoDB简介 3. MongoDB与关系型数据库的对比 4. MongoDB的安装 5. Compass的

小咪咪/ 2024年02月17日 12:32/ 0 赞/ 84 阅读

相关【MongoDB】一文带你快速掌握MongoDB文档插入和查询

文章目录前言一、单个文档插入 1. 语法格式 2. 参数 3. 示例 5. 提示二、批量文档

傷城~/ 2023年10月14日 19:00/ 0 赞/ 25 阅读

相关带你快速认识掌握CSS详解 (一)

今天这一篇, 让我们快速去认识一下CSS吧~~活不多说, 煌sir直接上货~~ CSS样式 > javaEE程序员对CSS的最高要求： > > ①基本看懂美工人员写的

谁践踏了优雅/ 2023年02月20日 13:56/ 0 赞/ 9 阅读

相关一篇文章带你认识 OAuth2

文章目录一、什么是 OAuth2 二、四种模式 1. 授权码模式 2. 简化模式

痛定思痛。/ 2022年12月11日 09:10/ 0 赞/ 323 阅读

相关一篇文章带你认识 SpringSecurity

文章目录一、SpringSecurity 介绍二、核心功能三、SpringSecurity 作用一、SpringSec

秒速五厘米/ 2022年12月10日 12:25/ 0 赞/ 341 阅读

相关带你认识ButterKnife

原文链接：[http://blog.csdn.net/donkor\_/article/details/77879630][http_blog.csdn.net_donkor_

短命女/ 2022年04月22日 09:56/ 0 赞/ 321 阅读

相关一文带你认识Spring事务

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 前言 > 只有光头才能变强。 > 文本已收录至我

心已赠人/ 2022年01月13日 13:17/ 0 赞/ 342 阅读

相关如何美化你的页面？带你认识css

什么是css呢？css是指层叠样式表 (Cascading Style Sheets)，简单来说就是帮你美化页面的。 ![640.png][] 如上图所示，在head标签下

柔光的暖阳◎/ 2022年01月11日 15:17/ 0 赞/ 230 阅读

相关一文带你认识Spring事务

前言 > 只有光头才能变强。 > 文本已收录至我的GitHub仓库，欢迎Star：[https://github.com/ZhongFuCheng3y/3y][http

电玩女神/ 2021年09月18日 00:08/ 0 赞/ 501 阅读