CSS 整理（1）

最新推荐文章于 2023-12-02 09:11:22 发布
最新推荐文章于 2023-12-02 09:11:22 发布
阅读量278 收藏
点赞数
分类专栏： HTML / CSS
  • CSS 指层叠样式表 (Cascading Style Sheets)

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权

 

外部样式表    <link> 标签链接到外部样式表

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部样式表    使用 <style> 标签在文档头部定义内部样式表

<head>
  <style type="text/css">
     hr {color: sienna;}
     p {margin-left: 20px;}
     body {background-image: url("images/back40.gif");}
  </style>
</head>

内联样式   表现和内容混杂在一起

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。 
<p style="color: sienna; margin-left: 20px">
    This is a paragraph
</p>

CSS 背景属性（Background）

属性 描述 CSS
background 在一个声明中设置所有的背景属性。 1
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-color 设置元素的背景颜色。 1
background-image 设置元素的背景图像。 1
background-position 设置背景图像的开始位置。 1
background-repeat 设置是否及如何重复背景图像。 1
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3

body
{ 
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 
}
JavaScript 语法： object.style.background="white url(paper.gif) repeat-y"
1.background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距） 
  background-color:yellow;

  background-color:#00ff00;

  background-color:rgb(255,0,255);
JavaScript 语法： object.style.backgroundColor="#00FF00"
2.background-position 属性设置背景图像的起始位置。  为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。
 
background-position:center;

background-position: 30% 20%; 

background-position: 50px 100px;

background-position: bottom center
JavaScript 语法： object.style.backgroundPosition="center"
3. background-size 属性规定背景图像的尺寸。 如果只设置一个值，则第二个值会被设置为 "auto"。 
background-size:100px 100px;

background-size:200px;

background-size:50%;
JavaScript 语法： object.style.backgroundSize="60px 80px"
4. background-repeat 属性设置是否及如何重复背景图像
值 描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
JavaScript 语法： object.style.backgroundRepeat="repeat-y"
5. background-origin 属性规定 background-position 属性相对于什么位置来定位。
值 描述 测试
padding-box 背景图像相对于内边距框来定位。 测试
border-box 背景图像相对于边框盒来定位。 测试
content-box 背景图像相对于内容框来定位。 测试
6. background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动
值 描述
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。
7. background-image 属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
JavaScript 语法： object.style.backgroundImage="url(stars.gif)"
<style type="text/css">
body
{ 
  background-image:url('/i/eg_bg_03.gif');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}
</style>

CSS 边框属性（Border 和 Outline）

属性 描述 CSS
border 在一个声明中设置所有的边框属性。 1
border-bottom 在一个声明中设置所有的下边框属性。 1
border-bottom-color 设置下边框的颜色。 2
border-bottom-style 设置下边框的样式。 2
border-bottom-width 设置下边框的宽度。 1
border-color 设置四条边框的颜色。 1
border-left 在一个声明中设置所有的左边框属性。 1
border-left-color 设置左边框的颜色。 2
border-left-style 设置左边框的样式。 2
border-left-width 设置左边框的宽度。 1
border-right 在一个声明中设置所有的右边框属性。 1
border-right-color 设置右边框的颜色。 2
border-right-style 设置右边框的样式。 2
border-right-width 设置右边框的宽度。 1
border-style 设置四条边框的样式。 1
border-top 在一个声明中设置所有的上边框属性。 1
border-top-color 设置上边框的颜色。 2
border-top-style 设置上边框的样式。 2
border-top-width 设置上边框的宽度。 1
border-width 设置四条边框的宽度。 1
outline 在一个声明中设置所有的轮廓属性。 2
outline-color 设置轮廓的颜色。 2
outline-style 设置轮廓的样式。 2
outline-width 设置轮廓的宽度。 2
border-bottom-left-radius 定义边框左下角的形状。 3
border-bottom-right-radius 定义边框右下角的形状。 3
border-image 简写属性，设置所有 border-image-* 属性。 3
border-image-outset 规定边框图像区域超出边框的量。 3
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 3
border-image-slice 规定图像边框的向内偏移。 3
border-image-source 规定用作边框的图片。 3
border-image-width 规定图片边框的宽度。 3
border-radius 简写属性，设置所有四个 border-*-radius 属性。 3
border-top-left-radius 定义边框左上角的形状。 3
border-top-right-radius 定义边框右下角的形状。 3
box-decoration-break   3
box-shadow 向方框添加一个或多个阴影。 3

1.border 简写属性在一个声明设置所有的边框属性。
值描述
border-width规定边框的宽度。参阅：border-width 中可能的值。
border-style规定边框的样式。参阅：border-style 中可能的值。
border-color规定边框的颜色。参阅：border-color 中可能的值。
inherit规定应该从父元素继承 border 属性的设置
JavaScript 语法：object.style.border="3px solid blue"
p 
{
border: medium double rgb(250,0,255)
}

2.border-color 属性设置四条边框的颜色。 
border-color:red green blue pink;
(上-->右-->下-->左)
border-color:red green blue;
(上-->右、左-->下)
border-color:red green;
(上、下-->左、右)
border-color:red;


border-color:#ff0000 #0000ff;

 

3.border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
值描述
none定义无边框。
hidden与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted定义点状边框。在大多数浏览器中呈现为实线。
dashed定义虚线。在大多数浏览器中呈现为实线。
solid定义实线。
double定义双线。双线的宽度等于 border-width 的值。
groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge定义 3D 垄状边框。其效果取决于 border-color 的值。
inset定义 3D inset 边框。其效果取决于 border-color 的值。
outset定义 3D outset 边框。其效果取决于 border-color 的值。
inherit规定应该从父元素继承边框样式。
border-style: groove dashed dotted
 
4.border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 只有当边框样式不是 none 时才起作用。
值描述
thin定义细的边框。
medium默认。定义中等的边框。
thick定义粗的边框。
length允许您自定义边框的宽度。
inherit

规定应该从父元素继承边框宽度。

p.five 
{
border-style: solid;
border-width: 5px 10px 1px medium
}
5.outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
   轮廓线不会占据空间，也不一定是矩形。  所有浏览器都支持 outline 属性（如果规定了 !DOCTYPE，则 IE8 支持 outline 属性） 
p 
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
 
border-top 、border-bottom 、border-left、border-right 
border-bottom:thick dotted #ff0000;
JavaScript 语法：object.style.borderBottom="3px solid blue"

border-top-width 、border-bottom-width、border-left-width、border-right-width 
p.one 
{
border-style: solid;
border-bottom-width: 15px
}
JavaScript 语法：object.style.borderBottomWidth="thick"

 

border-top-style、border-bottom-style、border-left-style、border-right-style

border-bottom-style:none
JavaScript 语法：object.style.borderBottomStyle="dotted"


border-top-color、border-bottom-color、border-left-color、border-right-color

border-bottom-color:#ff0000;
JavaScript 语法：object.style.borderBottomColor="blue"

（以上内容摘自http://www.w3school.com.cn）



米格战斗机
关注
专栏目录
原子化css-常用css整理-快速css样式
09-06
这是我项目中必备的通用css文件，有了它我感觉写样式快多了，只需要在class名中加入对应的类就可以了。 比如想要弹性布局，就直接class="flex" 比如想要padding-top:10px;就直接class="pt-10" 比如想要font-size:20...
css整理笔记
10-23
### CSS整理笔记：深入理解样式应用与选择器 在网页设计与开发中，CSS（层叠样式表）扮演着至关重要的角色，它负责定义网页的布局、颜色、字体等视觉表现，使网页不仅功能强大，而且美观吸引人。本文将从CSS的基础...
HTML CSS整理笔记
热门推荐
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
CSS面试题整理汇总
山雀的博客
03-13 5231
CSS面试题汇总
常见 css 布局整理
欢迎来到Gorit的博客
02-11 2539
常用 css 布局学习整理一、垂直居中二、等分布局三、等高布局四、多列布局五、局中布局（垂直居中）六、全屏布局七、三列布局八、圣杯布局九、双飞翼布局十、水平居中十一、css 布局特别整理 注意： 代码里面都有比较详细的注释 项目代码全部已经上传至 码云 和 Github，两个仓库我会同步更新 码云 git 下载地址：git@gitee.com:gorit/Coding-with-Front-end...
css样式大全(整理版）
weixin_66059613的博客
12-28 6890
css样式大全(整理版）
css卡片样式1
qq_45717424的博客
12-25 1744
css卡片样式1（改codepen）： 内容有五个，这里只展示了一个 html代码： <div class="slide-container"> <div class="wrapper"> <div class="clash-card barbarian"> <div class="clash-card__image clash-card__image--barbarian".
CSS基础代码整理
Darkgreen的博客
01-31 3386
CSS基础 基本概念 CSS Cascading Style Sheet（层叠样式表） CSS用来控制网页的外观 CSS引入方式 外部样式表 <link rel="stylesheet" type="text/css" href="文件路径" /> 内部样式表 <style type="text/css"> ...... </style> 行内样式表 <div style="color:red;">行内样式表</div> CSS选择器 元
CSS命名规则整理
胖太乙
12-14 4424
前言 在开发的道路上已经走了5年了， 作为一个后端开发，之前的工作中心一直都是在后端上。前端技术属于那种"半吊子"，什么都会， 什么都不精。 上个月接手一个前端的系统， 整个界面编写完成之后，发现自己的前端命名有很大的问题， 没有什么规律， 都是临时起意命名的，有些模块差不多的功能， 命名确是大不相同。于是， 今天抽出一点时间， 来整理一下自己这个前端命名的规范。（以下内容有部分是从百度查询的， 一部分是问前端开发的朋友的。也许每个人的规范不一样， 但是总体来说都是差不多的。） ID id，我通常用驼峰式命
css整理与优化工具
Cool的博客
09-29 712
http://www.css88.com/tool/csstidy/
CSS新手入门笔记整理：CSS图片样式
太空背包客的博客
12-02 1197
CSS图片样式
CSS背景background属性整理
ct5211314的博客
03-06 1450
属性整理
css笔记整理_1.pdf
02-26
css笔记整理（精简） 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式，集合样式) CSS 框模型概述
CSS3:CSS3 知识点提炼整理
05-08
CSS3核心知识点 CSS 选择器 背景 & 颜色 & 边框 字体 & 描边 & 倒影 动画 transform & transition & keyframes @media 媒体查询 flex 弹性盒 width: 50}, CSS进阶顺序 基础 能还原设计稿、兼容各种主流浏览器 盒子...
CSS整理.docx
02-27
1. **字体属性**： - `font-size`：定义字体大小。可以使用绝对单位（如px、pt）或相对单位（如em、rem）。 - `font-weight`：设置字体的粗细，包括`bold`（粗体）、`lighter`（细体）、`normal`（正常）等。 - `...
基于SpringBoot仿天猫购物系统.zip(毕设&课设&实训&大作业&竞赛&项目)
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
Python网络爬虫与推荐算法新闻推荐平台(毕设&课设&实训&大作业&竞赛&项目)
最新发布
09-20
Python网络爬虫与推荐算法新闻推荐平台：网络爬虫：通过Python实现新浪新闻的爬取，可爬取新闻页面上的标题、文本、图片、视频链接（保留排版） 推荐算法：权重衰减+标签推荐+区域推荐+热点推荐.zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
THUCNews数据集
09-20
THUCNews数据集
Q音：Vue3+Pinia+Vue Router4+Vant4的移动端仿抖音短视频项目.zip(毕设&课设&实训&大作业&竞赛&
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
Div+CSS规则精华整理
"这是一本关于Div+CSS规则整理的PDF文档，由作者hyungwon在博客中逐步整理而成，旨在帮助想要提升CSS技能的读者。文档内容涵盖9个章节，包括Div+CSS的基本规则、CSS命名规范、浏览器兼容性问题、W3C标准等，每个章节...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值