CSS 整理（1）

最新推荐文章于 2024-04-25 16:41:06 发布
最新推荐文章于 2024-04-25 16:41:06 发布
阅读量288 收藏
点赞数
分类专栏： 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 5758
CSS面试题汇总
常见 css 布局整理
欢迎来到Gorit的博客
02-11 2551
常用 css 布局学习整理一、垂直居中二、等分布局三、等高布局四、多列布局五、局中布局（垂直居中）六、全屏布局七、三列布局八、圣杯布局九、双飞翼布局十、水平居中十一、css 布局特别整理 注意： 代码里面都有比较详细的注释 项目代码全部已经上传至 码云 和 Github，两个仓库我会同步更新 码云 git 下载地址：git@gitee.com:gorit/Coding-with-Front-end...
css样式大全(整理版）
weixin_66059613的博客
12-28 7037
css样式大全(整理版）
css卡片样式1
qq_45717424的博客
12-25 1780
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 3408
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 4443
前言 在开发的道路上已经走了5年了， 作为一个后端开发，之前的工作中心一直都是在后端上。前端技术属于那种"半吊子"，什么都会， 什么都不精。 上个月接手一个前端的系统， 整个界面编写完成之后，发现自己的前端命名有很大的问题， 没有什么规律， 都是临时起意命名的，有些模块差不多的功能， 命名确是大不相同。于是， 今天抽出一点时间， 来整理一下自己这个前端命名的规范。（以下内容有部分是从百度查询的， 一部分是问前端开发的朋友的。也许每个人的规范不一样， 但是总体来说都是差不多的。） ID id，我通常用驼峰式命
css整理与优化工具
Cool的博客
09-29 724
http://www.css88.com/tool/csstidy/
【CSS】css 整理 - 持续更新中ing
qq_45852108的博客
04-25 2003
css 基础 进阶 和 实例整理
CSS新手入门笔记整理：CSS图片样式
太空背包客的博客
12-02 1239
CSS图片样式
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`（正常）等。 - `...
stata软件安装包（stata18）（stata软件安装包下载与安装）
11-07
软件主体：stata软件安装包。版本：stata18。价格：免费。安装教程：请阅读本人相对应的安装教程文章。描述：安装教程保姆级别仔细，直接按步骤来就行了。本人申明：本安装包需要的人可以免费获取，不用于商业买卖，只用于学术研究。（如果可以帮到大家就给个关注吧）
基于Java的电力设备管理系统的开发与设计
最新发布
11-07
内容概要：本文介绍了一个基于Java技术开发的电力设备管理系统的详细设计与实现过程。系统涵盖了电力设备、站点管理、技术资料图纸管理、建筑管理、审批流转等多个功能模块，通过高效的信息化手段，提高了电力设备的管理水平，降低了传统管理带来的冗余劳动，提升了工作效率。系统采用J2EE三层架构模式，使用SSH技术框架，前端使用JSP、CSS和JavaScript技术，数据库使用MySQL，实现了高内聚低耦合的系统架构。 适合人群：从事电力设备管理的IT从业人员，尤其是有一定Java开发基础的研发人员。 使用场景及目标：适用于需要对电力设备进行全面管理的企业，旨在提升电力设备管理的自动化水平和信息共享能力，从而减少人力投入，提高管理水平和安全性。 其他说明：本文提供了系统的总体架构、各功能模块的具体设计和实现细节，还讨论了系统测试的方法和测试用例，确保系统功能的完整性和可靠性。
【超强组合】基于VMD-蝠鲼觅食优化算法MRFO-Transformer-LSTM的光伏预测算研究Matlab实现.rar
11-07
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
【超强组合】基于VMD-鲸鱼优化算法WOA-Transformer-LSTM的光伏预测算研究Matlab实现.rar
11-07
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
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、付费专栏及课程。

余额充值