CSS3层叠样式表

客官°小女子只卖身不卖艺 2024-04-07 10:32 110阅读 0赞

/*
    *作者：呆萌老师
    *☑csdn认证讲师
    *☑51cto高级讲师
    *☑腾讯课堂认证讲师
    *☑网易云课堂认证讲师
    *☑华为开发者学堂认证讲师
    *☑爱奇艺千人名师计划成员
    *在这里给大家分享技术、知识和生活
    *各种干货，记得关注哦！
    *vx：it_daimeng
    */

**CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。**

**方式1 行内样式**

<div style="color:red; background-color: yellow;">       
    
                文字 </div>

**方式 2 嵌入式**

<style>
    
                 span{
    
                    color: red;
    
                    background-color: yellow;
    
                 }
    
            </style>

**方式3 链接式**

<link rel="stylesheet" href="css/index.css"  />

*  **CSS****中的选择符**

1.  **元素选择器**

<div id="d1">aa</div>
    
            <div class="news_title">bb</div>
    
            <div class="news_title">cc</div>
    
            <ul>bb</ul>
    
            <span class="news_title">dd</span>

**对应css样式的写法:**

**/\* 通配符选择器 \*/**

*{
    
        margin: 0;
    
        padding: 0;
    
    }

**/\*标签选择器\*/**

div,ul{
    
       
    
        margin: 0;
    
        padding: 0;
    
    }

**/\*id 选择器\*/**

#d1{
    
        color: red;
    
    }

**/\*类别选择器\*/**

.news_title
    
    {
    
        color: green;
    
    }

**关系选择器  
/\*父子关系\*/**

li>a{
    
        color: green;
    
    }

**/\*包含关系\*/**

.list a{  
    
        color: red;   
    
    }

**/\*相邻关系 ul下面的第一个a 标签\*/**

ul + a{
    
        color: blue;  
    
    }

**/\*兄弟关系 ul后面的所有 兄弟 a标签 \*/**

ul ~ a{
    
        color: yellow;
    
    }

**属性选择器  
/\*属性选择器\*/**

input\[name='uname'\]

\{

color: red;

\}

/\*name 以 u开头\*/

input\[name^='u'\]

\{

color: red;

\}

/\*name 以 u结尾\*/

input\[name$='u'\]

\{

color: red;

\}

/\*name 包含u的\*/

input\[name\*='u'\]

\{

color: red;

\}

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS3层叠样式表

/ 作者：呆萌老师 ☑csdn认证讲师 ☑51cto高级讲师 ☑腾讯课堂认证讲师 ☑网易云课堂认证讲师 ☑华为开发者学堂

客官°小女子只卖身不卖艺/ 2024年04月07日 10:32/ 0 赞/ 111 阅读

相关 CSS层叠样式表

CSS 作用如何在 html 页面中添加 css 样式 CSS 选择器颜色赋值方式背景图片文本和字体相关的样式 disp

素颜马尾好姑娘i/ 2024年03月26日 11:57/ 0 赞/ 106 阅读

相关 CSS层叠样式表

CSS层叠样式表回顾 1、HTML概述 Hyper Text Markup Language 超文本标记语言作用:创建网页文档，包含

客官°小女子只卖身不卖艺/ 2023年06月22日 06:23/ 0 赞/ 23 阅读

相关 JavaWeb：CSS层叠样式表

层叠样式表 CSS将网页内容和显示样式进行分离，提高了显示功能。 ![样式表css][css] ![样式表css][css 1] HTML和CSS的结合方式

傷城~/ 2022年07月15日 04:08/ 0 赞/ 292 阅读

相关 JavaWeb：CSS层叠样式表

层叠样式表 CSS将网页内容和显示样式进行分离，提高了显示功能。 ![样式表css][css] ![样式表css][css 1] HTML和CSS的结合方式

蔚落/ 2022年07月15日 04:08/ 0 赞/ 289 阅读

相关 CSS层叠样式表-相关总结

字体属性：(font) 1.大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可

分手后的思念是犯贱/ 2022年02月15日 00:11/ 0 赞/ 327 阅读

相关 day2——Css层叠样式表

Css语法一、标称名 \{ 属性：值；\} 一个样式的语法是由三部分构成：选择器、属性和属性值二、id和class id和class是HTML元

太过爱你忘了你带给我的痛/ 2021年12月03日 03:23/ 0 赞/ 416 阅读

相关 CSS：层叠样式表的使用

CSS：层叠样式表（ Cascading Style Sheets ，主要实现网页美化以及各种特效； CSS分为三种：一、行内样式（inline style）　

ゞ浴缸里的玫瑰/ 2021年11月23日 23:06/ 0 赞/ 586 阅读

相关 CSS层叠样式表的入门

目录：点击可快速跳转什么是css？ css的格式： css样式可以写在什么地方？ CSS的选择器有哪些？ 4）复合选择器： 5）属性选择器： 6）伪类选择器：

水深无声/ 2021年11月04日 13:04/ 0 赞/ 483 阅读

相关 HTML CSS 层叠样式表一

CSS，全拼Cascading Style Sheets，层叠样式表，用于控制html<body>的元素的样式和布局。一、CSS的三种引用方式 1.内嵌 <div s

短命女/ 2021年09月30日 03:02/ 0 赞/ 457 阅读