CSS之使用、语法、选择器、border与box、背景

最新推荐文章于 2022-09-22 19:37:04 发布
最新推荐文章于 2022-09-22 19:37:04 发布
阅读量530 收藏 1
点赞数
分类专栏： WebBasic 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27853161/article/details/53645397
版权

WHAT IS CSS?

  • CSS 指层叠样式表（Cascading Style Sheets）
  • 样式定义如何显示HTML元素
  • 样式通常存储在样式表中
  • CSS就是给HTML化妆的

如何使用CSS

内联样式

  • 样式定义在HTML元素的属性style里
  • CSS语法
    – 在元素的style属性内直接写样式,此样式无法复用
    – 属性和属性值之间用：连接
    – 多对属性之间用；隔开
<h1 style="color:red;">CSS</h1>

内部样式表

在head元素里面的style标签里写样式,此样式可以被当前页面上众多元素复用.

<head>
    <style>
        /*CSS的注释是这样的*/
        h2 {
            color: blue;
        }
    </style>
</head>
<body>
    <h2>CSS有3种用法</h2>
</body>

外部样式表

在单独的css文件中写的样式,哪个网页引用该文件,这个网页就能复用这些样式.

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

my.css文件中的内容

p {
    color: yellow;
}

CSS语法规范

CSS语法规范

这里写图片描述

CSS规则特性

这里写图片描述

样式优先级

这里写图片描述

CSS选择器

元素选择器

这里写图片描述

类选择器

这里写图片描述
这里写图片描述

ID选择器

这里写图片描述

选择器组

这里写图片描述

派生选择器

派生选择器用来选择子元素，分为2种：

后代选择器：选择某元素的所有后代(子孙)元素

这里写图片描述

子元素选择器：选择某元素的所有子元素

这里写图片描述

伪类选择器

伪类用于设置同一元素在不同状态下的样式。
常用伪类如下：

:visited 向已被访问的超链接添加样式

这里写图片描述
这里写图片描述

:hover 向鼠标悬停至元素上方时，向该元素添加样式

这里写图片描述

:focus 向元素获取焦点时，向该元素添加样式

这里写图片描述

CSS声明

border与box

border

这里写图片描述

四边设置

这里写图片描述

单边设置

这里写图片描述

样式单位

这里写图片描述
这里写图片描述

overflow内容溢出元素框时处理

这里写图片描述

box

box的作用

这里写图片描述

box的使用

这里写图片描述

box四边设置

这里写图片描述

box单边设置

这里写图片描述
这里写图片描述
这里写图片描述

背景

背景色

这里写图片描述

背景图片

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

IsSwm
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS3中的box-sizing（content-box与border-box）
12-14
总的来说，理解`box-sizing`属性以及content-box和border-box的区别对于CSS布局至关重要。正确使用这一属性可以帮助开发者更精确地控制元素的尺寸，从而创建出更加灵活和一致的布局。在实践中，根据项目需求选择合适...
CSS布局与语法参考手册
03-01
《CSS布局与语法参考手册》是一本专注于CSS（层叠样式表）的详细教程，旨在帮助读者深入理解和熟练掌握CSS的布局技巧与语法规则。本文将基于该资源的描述和标签，结合压缩包中的“CSS.CHM”文件，详细阐述CSS的核心...
利用nth-child选择器功能控制item border显示
暗透了更能看到星光
10-23 156
最右侧一列不需要Border-right 第一行不需要border-top .item:not(:nth-child(3n)){ border-right: 1rpx solid #cdcdcd; } .item:not(:nth-child(-n+3)){ border-top:1rpx solid #cdcdcd ; }
CSS3-选择器，边框
拼搏的夏目
09-27 429
选择器:first-of-type 父元素的第一个子元素p:first-of-type即是第一个P元素:last-of-type 父元素的最后一个子元素p:last-of-type即是指代最后一个P元素 :only-of-type 父元素的唯一一个子元素p:only-of-type即是指代唯一一个P元素:only-child p::only-child选择属于其父元素的唯一子元素的每个p元素，结构上
css选择器
最新发布
star3175的博客
09-22 126
span2是子元素的子元素span2是子元素的子元素这个元素不会被应用样式这个元素会被应用样式a:visited{ css样式 } //链接被访问过后。a:hover{ css样式 } //链接被鼠标悬停。span1是子元素span1是子元素
css边框和背景设置
MOONCOM的博客
01-09 605
一、initial initial 关键字用于设置 CSS 属性为它的默认值。 initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。 他和inherit类似，inherit是使用其父元素的对应属性。 二、border-radius       圆角边框的设置 border-radius可以设置四个值，分别是左上角、右上角、左下角、右下角。 你也可以分开来使用，按
Css之border属性
weixin_34232744的博客
12-03 863
设置border属性作用：设置对象边框样式，设置单独上边框、下边框、左边框、右边框样式，实现美化美观。边框起到分割、规划布局作用。1、四个边框border-left设置左边框，一般单独设置左边框样式使用border-right设置右边框，一般单独设置右边框样式使用border-top设置上边框，一般单独设置上边框样式使用border-bottom设置下边框，一般单独设...
css3基础语法总结大全
06-19
CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，相较于CSS2，它引入了许多新的特性和功能，极大地增强了网页设计与开发的能力。以下是对CSS3基础语法的一些关键知识点的详细总结： 1. **选择器增强*...
CSS的基本语法.rar
07-09
7. **选择器的优先级**：CSS的优先级由选择器的特殊性决定，ID选择器 > 类选择器 > 标签选择器，内联样式（如`style`属性）的优先级最高。 8. **层叠（Cascading）**：CSS的“层叠”特性意味着样式可以继承自父元素...
border的语法结构
前端黄晨琼的博客
11-16 636
border的语法结构： border-style:设置边框的样式。 none：设置无边框。 dashed：虚线。 dotted： 点状线。 double： 双实线。 solid：实线。 groove:3D凹槽效果。 ridge：3D垄起效果。 border-style:solid; 代表四个边框的样式。 border-style:solid dashed; 第一个值：上下边框的样式。第二个值：左...
css复习笔记（一）----选择器 盒模型
十九万里的博客
02-25 201
css复习笔记（一） css叫做层叠样式表 负责给html结构增添样式 一、css书写位置 1.内联样式表，style一般写在header里 <header> <style> css代码 </style> </header> 2.内联样式表 也叫做元素样式表 写在元素的style里面 不用选择器。 3.外部样式表 将css代码写在独立的css文件中 使用link元素在header里面链接到HTML文件中使用，是使用的最多的方法 二、选择器 选择器种
CSS六大选择器
weixin_44709490的博客
10-12 3364
1. 标签选择器：使用标签来对样式进行设置 例如对span标签样式进行设定： span{ ​ color: red; } 2. 类选择器：通过.box(可以是任意名称，.必不可少)来设置CSS样式，再通过class="box"方法来调用 例如： .box{ text-align: center; } <body> <div class="box"></box> </body> 3. id选择器：使用#b...
box布局、选择器、浮动、清除浮动、布局以及小三角效果
我的博客
07-16 672
css中的box布局 介绍： display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。（暂时还未得到firefox/Opera/chrome浏览器的完全支持，但可以用它们的私有属性定义） <定义> 如果定义了display:box则该容器则定义为了内联...
CSS——3种用法、规则特性、选择器、边框属性（border）、box
qq_43575044的博客
10-19 1046
CSS CSS简介： CSS指层叠样式表(Cascading Style Sheets)； 样式定义如何显示HTML 元素； 样式通常存储在样式表中； CSS就是给HTML化妆的。 1、如何使用CSS 内联方式 样式定义在单个的HTML元素中 内部样式表 样式定义在HTML页的头元素中 外部样式表 将样式定义在一个外部的CSS文件中(.css文件） 由HTML页面引用样式表文件 例： <!DOCTYPE html> <html> <head> <meta cha
css中三大选择器,CSS/CSS3 3 选择器
weixin_39613561的博客
08-03 234
1 类选择器 .class 例 .box 选择所有class="box"的元素2 id择器 #id 例 #box 选择id="box"的元素3 通配符选择器 * 例 * 选择所有的元素4 标签选择器 div 例 div 选择所有divdiv,span 选择 所有所有div和spandiv span 选择div内的所有spandiv>span 选择所有父级是div 的spandiv+span ...
css中的11种选择器
peri_zxy的博客
07-09 2942
说起css的选择器，我们最熟悉的应该就是class选择器和id选择器。但是css中的选择器却远远不止这几种。 我们在使用css的时候，虽然知道每次使用什么方法来对元素进行设置，但是却没有总结过css中选择器的种类，今天在查阅了官方文档之后，我对css的选择器做了一个总结，下面写出来，算是给自己做了一个梳理。 如下所示是css的MDN官方文档中所例出来的css选择器。 1、类型选择器 （示例：h1{}） 代码实例： ​ <style> h1{ color: lightp..
[转]jquery 常用的选择器
大象的博客
12-06 475
元素选择器$("#box") //选择id值等于box的元素，id值是唯一的，如果出现多个相同id的元素，那么只获取第一个元素$("div") //选择所有的div标签元素，返回div元素数组$(".box") //选择使用box类的css的所有元素$("*") //选择文档中所有的元素$("p.intro") //选取所有 class="intro" 的 <p> 元素$("p#demo"
DaZeng：CSS的选择器、选择符、伪类
大曾blog
11-01 400
10.28-11.3 WEB（二） 上周作业复习WEB(一)，整理资料 居中写三遍，JS原生轮播图背着能写出。 1、手风琴 这个是点了才动你可以写hover，hover之后滑动但是移出就还原，点击才像视频里这样，不还原，你可以用div背景色，或者自己找图这里面是有动画效果的，不是直接就变了。 2、css单位，px、em、rem、vmin、vmax 3、媒体查询 4、帧动画 5、3d盒子 6、还有个...
CSS层叠样式表 (Cascading Style Sheets)基础，CSS样式三种插入方式优先级比较
回忆
04-17 3084
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 如下列代码： p{ font-size:20px;/*设置文字字号*/    color:red;/*设置文字颜色*/    font-weight:bold;/*设置字体加粗*/ } 使用CSS样式的一个好处是通过
CSS3基本语法与新特性探索
- CSS3不仅继承了CSS2中的各种样式设置，如字体、颜色、布局等，还引入了许多新的功能和选择器。例如，CSS3支持更强大的选择器，允许更精确地定位和匹配HTML元素，提高了代码的可读性和效率。 2. CSS3的新特性： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值