css

最新推荐文章于 2024-11-02 23:02:00 发布
最新推荐文章于 2024-11-02 23:02:00 发布
阅读量165 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxmuq/article/details/113528472
版权

Cascading Style Sheets层叠级联样式表

格式

选择器{ 
    声明1;
    声明2;
    声明3;
}

外部引用

<head>
    <link rel="stylesheet" href="../css/style.css">
</head>

选择器

基本选择器

标签选择器

<head>
    <style>
        h1{
            color: blue;
        }
    </style>
</head>
<body>
<h1>标签选择器</h1>
</body>

class选择器

<head>
    <style>
        .a{
            color: blue;
        }
        .b{
            color: red;
        }
    </style>
</head>
<body>
<h1 class="a">类选择器</h1>
<h1 class="b">类选择器</h1>
<h1>类选择器</h1>
</body>

id选择器

<head>
    <style>
        #a{
            color: blue;
        }
        #b{
            color: red;
        }
    </style>
</head>
<body>
<h1 id="a">类选择器</h1>
<h1 id="b">类选择器</h1>
<h1>类选择器</h1>
</body>

标签可以有相同的class，但id唯一，这是class选择器与id选择器的区别。

同一个标签，id选择器样式>class选择器>标签选择器。

层次选择器

后代选择器

在某个元素的后面的某元素

<head>
    <style>
        //ul标签后面的所有p标签样式
        ul p {
            color: red;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<ul>
    <li>
        <p>p3</p>
    </li>
    <li>
        <p>p4</p>
    </li>
</ul>
</body>

子选择器

某元素的后一代

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        //body标签下一代中的p标签
        body>p {
            color: red;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<ul>
    <li>
        <p>p3</p>
    </li>
    <li>
        <p>p4</p>
    </li>
</ul>
</body>

相邻选择器

同一层次的元素的下一个元素

<head>
    <style>
		//和p2同层次，且是p2下一个的p标签
        .active + p {
            color: red;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
</body>

通用选择器

同一层次的元素后面的所有元素

<head>
    <style>
        //和p2同层次，且在p2后面所有的p标签
        .active ~ p {
            color: red;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
</ul>
<p>p6</p>
</body>

全部都在对应元素向下选择，但不包括该元素

结构伪类选择器

格式

标签:具体位置{
   声明
}

第一个子类和最后一个子类

<head>
    <style>
        //ul标签后代的第一个li标签
        ul li:first-child{
            color: red;
        }
        //ul标签后代的最后一个li标签
        ul li:last-child{
            color: green;
        }
        <!--如果有多个ul,每个ul的第一个和最后一个元素都会被选中-->
    </style>
</head>
<body>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>

定位到父元素选择第一个元素

<head>
    <style>
        //选中p元素的父亲的第一个孩子，这个孩子元素必须是p元素
        p:nth-child(1) {
            color: red;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
</body>

定位到父元素选择类型为该元素的第一个元素

<head>
    <style>
        //选择p元素的父亲元素后代中第一个类型为p的元素
        p:nth-of-type(1) {
            color: red;
        }
    </style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
</body>

p:nth-child(1)按顺序选择，如果p元素的父亲元素后代第一个元素不是p元素，样式将无效。

p:nth-of-type(1)按类型选择，会定位到p元素的父亲元素后代第一个类型为p的元素。

属性选择器

格式

标签[标签属性(=值)]{
	声明
}

例1：选中a标签中有id属性的元素

<head>
    <style>
        a[id] {
            color: red;
        }
    </style>
</head>
<body>
<a href="" id="">1</a>
<a href="">1</a>
</body>

例2：选中a标签中id属性为first的元素

<head>
    <style>
        a[id=first] {
            color: red;
        }
    </style>
</head>
<body>
<a href="" id="first">1</a>
<a href="" id="last">1</a>
</body>

例3：选中a标签中class属性为links item的元素

<head>
    <style>
        a[class="links item"] {
            color: red;
        }
    </style>
</head>
<body>
<a href="" class="links item">1</a>
<a href="" class="links" >1</a>
</body>

因为id是唯一的，所以id带值可以没有"",但class需要有引号，参考例2，例3。

例4：选中a标签中class属性含有links的元素

<head>
    <style>
        a[class*="links"] {
            color: red;
        }
    </style>
</head>
<body>
<a href="" class="links item">1</a>
<a href="" class="item">1</a>
</body>

=表示属性内的值绝对等于引号内的值，*=表示属性内的值含有引号内的值，参考例3，例4

例5：选中a标签中href属性以http开头的元素（利用正则表达式）

<head>
    <style>
        a[href^=http] {
            color: red;
        }
    </style>
</head>
<body>
<a href="https:www.baidu.com">1</a>
<a href="../resource/image/1.jpg">1</a>
</body>

例6：选中a标签中href属性以com结尾的元素（利用正则表达式）

<head>
    <style>
        a[href$=com] {
            color: red;
        }
    </style>
</head>
<body>
<a href="https:www.baidu.com">1</a>
<a href="../resource/image/1.jpg">1</a>
</body>

美化页面元素

span

将字体重点突出（感觉和div差不多，但div包含内容更多）

<head>
    <style>
        #a{
            font-size: 50px;
        }
    </style>
</head>
<body>
Hello <span id="a">World！</span>
</body>

字体样式

font-style: oblique;			//字体风格，斜体
font-weight: bold;              //字体粗细（宽度），粗
line-height: 20px;				//字体行高
font-size: 40px;                //字体大小
font-family: Arial,宋体;        //字体样式，英文和中文
color: red;                     //字体颜色，红
font: oblique bold 20px/50px 宋体;      //字体风格 字体粗细 字体行高/字体大小 字体样式

文本样式

background: rgba(0,0,255,0.4);      //背景颜色
text-align: center;     			//排版，居中
text-indent: 2em;      				//首行缩进
line-height: 50px;     				//行高，改变行高可以改变字段间距
text-decoration: underline;     	//下划线
text-decoration: line-through;      //删除线
text-decoration: overline;      	//上划线
vertical-align: middle;         	//和参照物水平对齐

超链接伪类

/*鼠标触碰后效果：字体变黄,字体变大*/
a:hover{
	color: yellow;
	font-size: 50px;
}
/*鼠标点击效果：背景变蓝*/
a:active{
	background: blue;
}
/*一般a标签也会去除下划线*/
text-decoration: none;

阴影效果

/*text-shadow: 阴影颜色 水平偏移，垂直偏移，阴影半径*/
text-shadow: green 10px -10px 2px;	//一个向右上角偏移10px，半径为2px的绿色阴影

列表

list-style:
none        去除样式
circle      空心圆
decimal     数字，有序列表
square      正方形

背景

<style>
    div{
        width: 720px;
        height: 792px;
        background-image: url("../resources/image/1.jpg");
        background-position: 200px 10px;		//图片定位
        background: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);		//渐变
        /*https://www.grabient.com/*/
    }
</style>
/*必须要写宽度和高度才能有背景图，默认是图片全部平铺*/
background-repeat: repeat-x;		//水平平铺
background-repeat: repeat-y;		//垂直平铺
background-repeat: no-repeat;		//不平铺，也需要有宽度高度
/*background: 背景颜色 图片路径 图片水平偏移 图片垂直偏移 平铺方式*/
background: red url("../resources/image/2.jpg") 200px 10px no-repeat;

盒子模型

在这里插入图片描述

  • margin：外边距
  • border：边框
  • padding：内边距
  • 盒子大小：margin+border+padding+内容大小

边框

/*border: 粗细 样式 颜色*/
border: 1px solid red;
border-radius: 50px;		//边框圆角
/*box-shadow: 阴影颜色 水平偏移，垂直偏移，阴影半径*/
box-shadow: green 10px -10px 2px;	//盒子阴影

border-style: 
solid		//边框实线
dashed		//边框虚线

border-radius: 50px;					//四角同一弧度
border-radius: 50px 100px;				//左上右下50，右上左下100
border-radius: 50px 100px 150px 200px;	//左上50，右上100，右下150，左下200，顺时针
width=heigth=2*border-radius == 圆形
width=2*heigth=border-radius: heigth heigth 0 0 == 向上半圆
width=heigth=border-radius: heigth 0 0 0 == 左上扇形

外内边距

Html本身有的标签会有个默认的外边距，一般会手动写为0

body{margin: 0px;}

margin: 0px;		//无外边距
margin: 0px auto;	//上下外边距为0，左右外边距居中对齐
margin: 10px 20px 30px 40px;	//上外边距为10，右外边为20，下外边距为30，右外边距40，顺时针

外边距与内边距操作一样

浮动

display

block		//变为块元素，独占一行
inline		//行内元素
inline-block	//保持块元素但可以内联保证下一个元素可以在同一行

float

left		//向左浮动
right		//向右浮动

clear

left		//左侧不允许有浮动元素
right		//右侧不允许有浮动元素
both		//两侧不允许有浮动元素
none

overfloat

hidden		//修剪内容溢出
scroll		//滚动条

父级边框塌陷

我的理解就是最外围的边框没有把内容包括起来。

解决办法

  1. 增加父级元素高度（外边框高度直到包含所有内容）

    #father{
    border: 1px red solid;
    heigth: 1000px;
}

  2. 设置一个空的div标签，清除浮动

    <style>
    #clear{
        clear: both;
        margin: 0;
        padding: 0;
    }
</style>
<div id="father">
    <div id="clear"></div>
</div>

  3. overfloat

    #father{
    border: 1px red solid;
    overflow: hidden;
}

  4. 父类添加伪类 :after

    #father:after{
    content: '';
    display: block;
    clear: both;
}

定位

相对定位

position: relative		//相对原来的位置偏移，但原来的位置会被保留
/*下面要加上相对原来位置偏移多少
负数表示与相对方向相同，正数表示与相对方向相反*/
top: -20px;		//向上偏移20
left: 10px;		//向右偏移10

绝对定位

  • 相对于父级元素定位

    //父元素定位但不偏移办法
#father{
    position: relative;
}

  • 没有父级元素定位则相对于浏览器边框定位

position: absolute;			//原来位置不保留
/*下面要加上相对原来位置偏移多少
负数表示与相对方向相同，正数表示与相对方向相反*/
top: -20px;		//向上偏移20
left: 10px;		//向右偏移10

固定定位

position: fixed;		//相对浏览器定位，跟随滚动条移动
/*需要确定固定在哪里，下面是固定在右下角*/
right: 0;
bottom:0;

opacity

opacity: 0.5;			//背景透明度

Z-index

类似图层：当两个标签叠加在同一位置时使用，确定其中一个标签在另一个标签之上。

<head>
    <style>
        #app{
            padding: 0;
            margin: 0;
            width: 730px;
            overflow: hidden;
            font-size: 50px;
            line-height: 100px;
            border: 1px solid red;
            position: relative;
        }
        .l,.b{
            width: 730px;
            height: 100px;
            position: absolute;
            top:700px;
        }
        .l{
            color: white;
            z-index: 1;
        }
        .b{
            background: black;
            opacity: 0.5;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li><img src="../resources/image/1.jpg" alt=""></li>
        <li class="l">这是第一段文字</li>
        <li class="b"></li>
    </ul>
</div>
</body>
xxmuq
关注
专栏目录
Tailwind CSS
m0_58039950的博客
05-12 2198
Tailwind CSS Tailwind CSS是一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面. Useful Links 传奇：官方资源 Website - 官方 Tailwind CSS 网站. Repository - 官方 Tailwind CSS 存储库. Discussions - 与其他社区成员就 Tailwind 进行联系的官方场所. Tailwind UI - 使用 Tailwind CSS 制作的组件库. Headless UI - 完全没有样式，完全可访问的
postcss-windicss:Windi CSS的PostCSS集成
04-01
postcss-windicss :test_tube: 过期的。 :warning: 不鼓励使用此软件包，因为PostCSS的API存在一些限制。 将我们用于每个专用框架/构建工具，以获取最佳的开发经验和性能。 该插件应该是使用Windi CSS的最后选择...
CSS - 选择器详解 - 子代、后代选择器详解 - 伪类选择器 - 测试
Muxiu
03-06 8970
目录测试准备：子代选择器 >测试代码：指定id的子代选择器后代选择器 (以空格隔开)指定 id 的后代选择器指定 class 类 的后代选择器多空格后代选择器详解 (特别重要)伪类选择器 :参考链接： 测试准备： 新建一个测试项目文件夹 test，然后在 test 文件夹内新建一个名为 css 的文件夹，创建一个名为 style.css的文件，最后在test文件夹下新建一个 test.html 文件。 test | —— | | ——css —— style.css | test.html 子代选择器
css 所有后代元素,CSS 选择子元素和后代元素
weixin_42300090的博客
08-04 4988
内层11内层12内层21子元素概念:如上代码 , id 为 container 的div元素 包含了 id 为 layer1 和 layer2 的两个div元素。这种包含是直接包含， 中间没有其他的层次的元素了。 所以 id 为 layer1 和 layer2 的两个div元素 是 id为 container 的div元素的直接子元素而 id 为 layer1 的div元素 又包含了 id 为 i...
css 选择器
qq_42638586的博客
04-10 1636
css选择器
css子元素和后代元素选择器
World peace的博客
04-15 1651
元素之间的关系： 子元素：直接被父元素包含的子元素 父元素：直接包含子元素的元素 祖先元素：直接或间接包含后代元素的元素 后代元素：直接或间接被祖先元素包含的元素（子元素也是后代元素） 兄弟元素：拥有相同父元素的元素 1：后代元素选择器：选中指定元素的指定后代元素 语法：祖先元素 后代元素{ }（中间用空格隔开） 例如：div span{ color: green; } 2...
css的访问孩子节点,CSS的继承和节点树
weixin_35801556的博客
08-04 405
HTML网页可以看作是一个节点的集合，在HTML文档中可以包含不同的标记，HTML文档中的每个成分都是一个节点。一个节点树可以把一个HTML文档展示为一个节点集，以及它们之间的连接。在每一个节点树种，最顶端的节点被称为根。每一个节点，除根之外，都拥有父节点。一个节点可以有无限的子节点，叶是无子的节点，同级节点指拥有相同的父的节点。下图为一个节点树：CSS继承指的是子标记会继承父标记的所有样式风格，...
css投影
weixin_41824429的博客
10-08 7065
css投影
CSS3 3D 变换详解
热门推荐
起心动念皆是因，当下所受皆是果。
04-13 1万+
CSS3 立体 3D 变换
CSS调整背景
weixin_74261199的博客
09-16 2992
函数指定，图片的位置可以是本地路径，也可以是网络资源路径。注意：设置图像坐标时，一定要把图像设置为不重复平铺，即。正如刚刚只设置了背景图片，没有设置重复平铺方式，那么。不然图片平铺之后看不出背景图片的位置。设置背景图的起始x坐标，设置背景图的起始y坐标。
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
前端学习Day10 CSS盒子属性（附练习版）
As977_的博客
11-02 477
medium 为默认宽度，thin 为小于默认宽度，thick 为大于默认宽度。⚠️：要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为absolute。在web页面中，“盒子”的结构包括厚度、边距、填充等元素，引申到CSS中，就是border、margin和padding。对于任何盒子，都可以分别设定4条边的padding、border和maegin，实现各种各样的排版效果。length 由浮点数字和单位标识符组成的长度值，不允许负值。
第八章 利用CSS制作导航菜单课后习题
2302_80786141的博客
11-01 765
【代码】第八章 利用CSS制作导航菜单课后习题。
第八章 利用CSS制作导航菜单习题
最新发布
2402_87184304的博客
11-02 286
【代码】第八章 利用CSS制作导航菜单习题。
flex布局的练习题 ---都抖音解决方案(web)
m0_75035023的博客
10-31 455
flex布局的练习题 ---都抖音解决方案(web),html,
第8章利用CSS制作导航菜单(第八次作业)
H2629896520的博客
11-01 651
【代码】第8章利用CSS制作导航菜单(第八次作业)
CSS编程完全参考手册
资源摘要信息:"CSS完全参考手册.chm是一个包含了大量关于CSS(层叠样式表)信息的电子文档。CSS是一种用于控制网页表现和布局的样式表语言。它由W3C制定标准，是网页设计和开发中不可或缺的一部分。CSS完全参考手册....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值