css知识点

最新推荐文章于 2021-12-02 00:46:25 发布
最新推荐文章于 2021-12-02 00:46:25 发布
阅读量876 收藏 1
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_40094105/article/details/78157090
版权
CSS margin 属性

设置一个p元素的所有四个边距：

p 
{
margin:2cm 4cm 3cm 4cm;
}

margin:10px 5px 15px 20px;
上边距是 10px
右边距是 5px
下边距是 15px
左边距是 20px

margin:10px 5px 15px;
上边距是 10px
右边距和左边距是 5px
下边距是 15px

**margin:10px 5px;**
上边距和下边距是 10px
右边距和左边距是 5px

margin:10px;
所有四个边距都是 10px

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p.ex1 {margin:2cm 4cm 3cm 4cm}
</style>
</head>

<body>
<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个指定边距大小的段落。</p>
<p>一个没有指定边距大小的段落。</p>
</body>

</html>

预览

CSS padding 属性

设置一个P元素的填充：

p 
{
padding:2cm 4cm 3cm 4cm;
}

padding:10px 5px 15px 20px;
上填充是 10px
右填充是 5px
下填充是 15px
左填充是 20px

padding:10px 5px 15px;
上填充是 10px
右填充和左填充是 5px
下填充是 15px

padding:10px 5px;
上填充和下填充是 10px
右填充和左填充是 5px

padding:10px;
所有四个填充都是 10px

list-style-type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

预览


CSS text-decoration 属性

设置h1，h2，h3和h4元素文本装饰：

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>

</html>

CSS :hover 选择器

选择鼠标移到链接上的样式：

a:hover
{ 
background-color:yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:hover
{
    background-color:yellow;
}
</style>
</head>

<body>
<a href="http://www.runoob.com/">runoob.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>

<p><b>注意:</b> 当鼠标移动到连接上 :hover选择器样式链接到该超练级.</p>

</body>
</html>


提示: :hover 选择器器可用于所有元素，不仅是链接。
提示: :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式 :active选择器设置当你点击链接时的样式。
注意: 为了产生预期的效果，在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后！！

激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接：

a:link    {color:green;}-->激活的
a:visited {color:green;}-->已访问的
a:hover   {color:red;}-->未访问的或者当有鼠标悬停在其上的链接
a:active  {color:yellow;}-->点击鼠标时的颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:monospace;}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>

<body>
<p>将鼠标移至链接上查看其样式改变.</p>

<p><a class="ex1" href="/css/">这个链接改变颜色</a></p>
<p><a class="ex2" href="/css/">这个链接改变字体大小</a></p>
<p><a class="ex3" href="/css/">这个链接改变背景颜色</a></p>
<p><a class="ex4" href="/css/">这个链接改变字体类型</a></p>
<p><a class="ex5" href="/css/">这个链接改变文字修饰</a></p>
</body>

</html>
CSS :active 选择器

选择激活的链接样式：

a:active
{ 
background-color:yellow;
}

鼠标点击时连接的样式

CSS :visited 选择器

选择访问过得链接样式：

a:visited
{
    background-color:yellow;
}

:visited向访问过的链接添加特殊的样式。

Tip: 使用:visited选择器设置访问过的页面链接的样式， :hover选择器当有鼠标悬停在其上的链接样式，:active 选择器设置当你点击链接时的样式。

CSS border 属性

设置四个边框样式：
p
{
border:5px solid red;
}

可以设置的属性分别（按顺序）：border-width, border-style,和border-color.
如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p
{
    border:5px solid red;
}
</style>
</head>

<body>
<p>段落中的一些文本。</p>
</body>
</html>

CSS text-align 属性

h1, h2, 和 h3元素设置文本的对齐方式：

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>

CSS border-bottom 属性

设置底部边框样式：

p 
{
    border-style:solid;
    border-bottom:thick dotted #ff0000;
}

可以设置的属性分别（按顺序）：border-bottom-width, border-bottom-style,和border-bottom-color. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p {border-style:solid;}
p.none {border-bottom-style:none;}
p.dotted {border-bottom-style:dotted;}
p.dashed {border-bottom-style:dashed;}
p.solid {border-bottom-style:solid;}
p.double {border-bottom-style:double;}
p.groove {border-bottom-style:groove;}
p.ridge {border-bottom-style:ridge;}
p.inset {border-bottom-style:inset;}
p.outset {border-bottom-style:outset;}
</style>
</head>

<body>
<p class="none">无底边界。</p>
<p class="dotted">点底边界。</p>
<p class="dashed">虚线底边界。</p>
<p class="solid">实线底边界。</p>
<p class="double">双线底边界。</p>
<p class="groove">凹槽底边界。</p>
<p class="ridge">垄状底边界。</p>
<p class="inset">嵌入底边界。</p>
<p class="outset">外凸底边界。</p>
</body>
</html>

CSS3 :last-child 选择器

指定父元素中最后一个p元素的背景色：

p:last-child
{
background:#ff0000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
p:last-child
{
    background:#ff0000;
}
</style>
</head>
<body>

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>
</html>

CSS position 属性

定位

元素：

h2
{
position:absolute;
left:100px;
top:150px;
}

用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h2
{
    position:absolute;
    left:150px;
    top:200px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

</html>

CSS overflow 属性

设置overflow属性进行滚动：

div 
{
width:150px;
height:150px;
overflow:scroll;
}

overflow:visible;

overflow:scroll; 

overflow:hidden;

CSS display 属性

设置段落生成一个行内框：

p.inline
{
    display:inline;
}


CSS float 属性

让图像向右侧浮动：

img 
{
float:right;
}
CSS min-width 属性

设置段落的最小宽度：

p
{
min-width:1000px;
}

% 定义基于包含它的块级对象的百分比最小宽度。

CSS3 box-shadow 属性

向 div 元素添加阴影：

div
{
    box-shadow: 10px 10px 5px #888888;
}

box-shadow: h-shadow v-shadow blur spread color inset;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

CSS z-index 属性

属性定义及使用说明
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

CSS cursor 属性

一些不同的光标：

span.crosshair {cursor:crosshair}
span.help {cursor:help}
span.wait {cursor:wait}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>


潇洒的白杨树
关注
专栏目录
CSS常用样式：上
low1101的博客
12-03 246
display：为了达到行级元素和块级元素互相转换运营而生的CSS样式。 常用的display属性值是有： none：隐藏元素 block：转换为块级元素 inline、转换为行级元素 inline-block：转换为行块级元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&gt...
style常见属性
qq_38211852的博客
05-12 8608
一、常用属性： 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。 例： 复制代码代码如下:&lt;div style="width:200px;height:200px;background-color:Black;"&gt; &lt;/div&gt; 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。 例： 复制代码代码如下:&lt;div style="...
github上前端面试知识整理之CSS部分
tcap99的博客
10-25 177
github仓库链接：https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ （1）有两种， IE 盒子模型、W3C 盒子模型； （2）盒模型： 内容(content)、填充(p...
CSS的布局
m0_52326740的博客
12-02 213
目录 1..盒子布局 border: padding: 写法: margin: 图片展示 2.元素的分类 dispaly: 介绍 效果 效果 css的隐藏元素的方式 3.浮动布局 float: clear: 4.定位布局 position: 代码 (1)效果 (2)效果 (3)效果 1..盒子布局 border: dotted 定义点状边框 dashed 虚线，但是大多浏览器为实现 solid 实线 double 定..
html设置p距左侧距离,P标签段落距离如何设置？
weixin_31592801的博客
06-01 4566
在网页中文章段落一般我们用html标签进行分段，使用p标签上一段文章与下一段文章中间就会产生距离，如何控制p与p之间的间距呢？下面本篇文章就来给大家介绍一下p标签段落距离如何调整与设置。方法1：使用CSS padding内补白(内边距)可以推荐使用padding设置段落上下间距。通过设置上下内补白，内距离即可实现p段落上下间距设置。语法：p{padding:10px 0;}示例：段落案例p {pa...
html+css知识点总结
06-24
html+css知识点总结
CSS知识点汇总.xmind
04-16
CSS
CSS知识点.xmind
08-30
里面整理了css样式,用思维导图的形式展示了,对学习css的同学们来说更清晰,css知识点整理,欢迎大家来收藏
ＣＳＳ知识点总结（脑图）
12-05
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加...于是CSS便诞生了。
HTML、CSS知识点总结
10-20
html、css知识点，归纳整理。包括基本标签、样式、例子、运行环境等。欢迎大家讨论、更正，共同进步！
vue学习（2）——样式style
军威兄的博客
04-22 824
举个例子 /* 设置按钮：独占一行、margin外边距（上右下左）、背景色、字体颜色、border边框（宽度、样式、颜色、继承父元素样式）、padding内边距、圆角、字体大小、光标 */ button { display: block; margin: 20px 0; background: mediumseagreen; color: aliceblue; border:...
html文字水平距左侧距离,html怎么设置左边距
weixin_29504571的博客
05-30 1万+
html设置左边距的方法：首先新建一个HTML文档；然后定义一个box；接着在head标签输入style标签；最后在“#box1”里输入“position:absolute;”定位，并输入letf定义左边距即可。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。新建一个HTML文档，如图所示定义一个box，输入如图所示然后在head标签输入style...
html的标签位置属性（学习笔记）
热门推荐
影子
12-23 2万+
div：定义位置有两种方式：一种是使用相对位置，一是使用绝对位置。 绝对定位有两个属性：left和top，分别是距离网页左边和网页顶部的绝对位置。借助style属性，按照如下的格式进行设置： style = "position:absolute;left:距离左边距离;top:距离顶部距离" 例如： &lt;div name = "mydiv" id="mydiv" style="po...
html5关于padding是复合属性,HTML DOM Style padding 属性 | 菜鸟教程
weixin_35049095的博客
06-05 797
Style padding 属性 Style 对象定义和用法padding 属性设置或返回元素的内边距。该属性可使用 1 到 4 种值：如果规定一种值，比如：div {padding: 50px} - 所有四个内边距都是 50px。如果规定两种值，比如：div {padding: 50px 10px} - 上内边距和下内边距是 50px，左内边距和右内边距是 10px。如果规定三种值，比如：div...
【原创】html1
qq_45766280的博客
01-30 101
HTML：超文本标记语言，是一种用于创建网页的标准标记语言。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h1>我的第一个标题&...
HTML DOM中DIV的Style：margin，border，padding
皓月如我的专栏
09-25 2638
margin：边框外的空白，图中橙色部分 border：边框，图中红色虚线部分 padding：边框内的空白，图中绿色部分 content：头像图片部分style=”margin:20px; border:thick dotted #FF0000; padding:20px”对照原图（未修改div属性时） <div id="blog_userface" style="margin:20px;
css之padding
Jancy的博客
03-13 933
1.padding影响元素尺寸： 对于block元素： - box-sizing:border-box;padding值大于宽度值，会影响元素宽度 - width非auto，padding值会影响元素宽度 - box-sizing:border-box;同时padding值没有大于宽度值或者width:auto,padding值不会影响元素宽度 对于inline元素： 水平padding
CSS：CSS padding（填充）
weixin_30755393的博客
04-20 117
ylbtech-CSS：CSS padding（填充） 1.返回顶部 1、 CSSpadding（填充） CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。 padding（填充） 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充...
padding样式属性
QBjie的博客
07-15 452
padding:在一个声明中设置元素所有内边距的宽度（即元素距内边框的距离），同样分为上下左右四种：padding-top，padding-bottom，padding-left，padding-right 例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> &lt
CSS知识点全览：单位、选择器与样式引入
"这是一个关于CSS知识点的综合文档，涵盖了CSS中的各种单位、颜色处理、图标设置、样式表引入方式、优先级、选择器、内容属性、背景属性、字体属性、文本属性、列表属性以及表格样式等多个核心概念。" 在CSS中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值