CSS教程II

最新推荐文章于 2022-04-12 15:46:58 发布
最新推荐文章于 2022-04-12 15:46:58 发布
阅读量82 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47250504/article/details/118273063
版权

CSS

一、CSS列表

1、不同的列表项标记

<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}

ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}

ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}

</style>
</head>

<body>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

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

<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

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

<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>

在这里插入图片描述

2、所有的CSS列表属性

在这里插入图片描述

二、CSS表格

制作一个个性化表格

<style>
#customers
{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:100%;
	border-collapse:collapse;
}
#customers td, #customers th 
{
	font-size:1em;
	border:1px solid #98bf21;
	padding:3px 7px 2px 7px;
}
#customers th 
{
	font-size:1.1em;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	background-color:#A7C942;
	color:#ffffff;
}
#customers tr.alt td 
{
	color:#000000;
	background-color:#EAF2D3;
}
</style>
</head>

<body>
<table id="customers">
<tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>

在这里插入图片描述

三、CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
在这里插入图片描述
不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

盒子模型演示

<style>
div {
    background-color: aliceblue;
    width: 300px;
    border: 25px solid slateblue;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 紫色边框。</div>

在这里插入图片描述

四、CSS边框

1、CSS 边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

2、CSS边框样式

边框样式属性指定要显示什么样的边界。
*border-style属性用来定义边框的样式

（1）none: 默认无边框

<style>
p.none {border-style:none;}
</style>
</head>

<body>
<p class="none">无边框。</p>
</body>

在这里插入图片描述

（2）dotted: 定义一个点线边框

<style>
p.dotted {border-style:dotted;}
</style>
</head>

<body>
<p class="dotted">点线边框。</p>
</body>

在这里插入图片描述

（3）solid: 定义实线边框

<style>
p.solid {border-style:solid;}
</style>
</head>

<body>
<p class="solid">实线边框。</p>
</body>

在这里插入图片描述

（4）double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

<style>
p.double {border-style:double;}
</style>
</head>

<body>
<p class="double">双边框。</p>
</body>

在这里插入图片描述

（5）groove: 定义3D沟槽边框。效果取决于边框的颜色值

<style>
p.groove {border-style:groove;}
</style>
</head>

<body>
<p class="groove"> 凹槽边框。</p>
</body>

在这里插入图片描述

（6）ridge: 定义3D脊边框。效果取决于边框的颜色值

<style>
p.ridge {border-style:ridge;}
</style>
</head>

<body>
<p class="ridge">垄状边框。</p>
</body>

在这里插入图片描述

（7）inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

<style>
p.inset {border-style:inset;}
</style>
</head>

<body>
<p class="inset">嵌入边框。</p>
</body>

在这里插入图片描述

（8）outset: 定义一个3D突出边框。 效果取决于边框的颜色值

<style>
p.outset {border-style:outset;}
</style>
</head>

<body>
<p class="outset">外凸边框。</p>
</body>

在这里插入图片描述

3、边框颜色

设置1-4个边框颜色


<style>
p.one
{
	border-style:solid;
	border-color:#9891f3;
}
p.two
{
	border-style:solid;
	border-color:#9891f3 #36a3e4;
}
p.three
{
	border-style:solid;
	border-color:#9891f3 #f5f54a #36a3e4;
}
p.four
{
	border-style:solid;
	border-color:#9891f3 #f5f54a #36a3e4 rgb(255, 93, 91);
}
</style>
</head>

<body>
<p class="one">1个颜色</p>
<p class="two">2个颜色</p>
<p class="three">3个颜色</p>
<p class="four">4个颜色</p>
</body>

在这里插入图片描述

4、CSS边框属性

在这里插入图片描述

五、CSS轮廓

CSS轮廓属性
在这里插入图片描述

六、CSS外边距

<style>
p
{
	background-color:#abd0ff;
}
p.margin
{
	margin:100px 50px;
}
</style>
</head>

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

在这里插入图片描述
margin属性可以有一到四个值。

  • margin:25px 50px 75px 100px;
    上边距为25px
    右边距为50px
    下边距为75px
    左边距为100px
  • margin:25px 50px 75px;
    上边距为25px
    左右边距为50px
    下边距为75px
  • margin:25px 50px;
    上下边距为25px
    左右边距为50px
  • margin:25px;
    所有的4个边距都是25px

CSS边距属性

在这里插入图片描述

七、CSS填充

<style>
p
{
	background-color:#bbf6fe;
}
p.padding
{
	padding:25px 50px;
}
</style>
</head>

<body>
<p>这是一个没有指定填充边距的段落。</p>
<p class="padding">这是一个指定填充边距的段落。</p>
</body>

在这里插入图片描述
Padding属性，可以有一到四个值。

  • padding:25px 50px 75px 100px;
    上填充为25px
    右填充为50px
    下填充为75px
    左填充为100px
  • padding:25px 50px 75px;
    上填充为25px
    左右填充为50px
    下填充为75px
  • padding:25px 50px;
    上下填充为25px
    左右填充为50px
  • padding:25px;
    所有的填充都是25px

CSS填充属性

在这里插入图片描述

HYT0329
关注
css教程
09-15
CSS基础教程 （css教程.pdf）
CSS快速入门
最新发布
LG_971124的博客
08-05 1002
CSS学习笔记
CSS入门教程
Herr Apfel的专栏
03-12 1708
　 CSS是“Cascading Style Sheets”的简称，中文翻译为“串接样式表”，也有人翻译为“样式表”。CSS用以作为网页的排版和风格设计，在web标准建站中，对CSS的熟悉和使用是相当重要的一个内容。CSS的作用是弥补HTML的不足，让网页的设计更为灵活。　　这个文章只是为您介绍CSS的基础应用，指引您的一个入门的基础教程，主要目的是为推进web标准贡献自己的微
《CSS 教程》
yexiangCSDN的专栏
06-26 441
《CSS 简介》 《CSS 语法》 《CSS Id 和 Class》 《CSS 创建》 《CSS Backgrouds背景》 《CSS Text文本》 《CSS Fonts字体》 《CSS Web安全字体组合》 《CSS 链接link》 《CSS 列表样式》 《CSS Table表格》 《CSS 盒子模型》 《CSS Border边框》 《CSS outline轮廓》...
css.rar_css 教程
09-14
CSS教程是初学者掌握网页设计和前端开发的重要步骤。本“css.rar”压缩包提供了一个基础的CSS教程，适合对网络编程感兴趣的人群学习。 首先，我们从“css.pdf”这个文件名推测，这可能是一个详细的CSS指南或教程...
极速中文CSS教程（基础部分预览）.pdf
12-13
"极速中文CSS教程（基础部分预览）" 本教程旨在提供一个全面的 CSS 教程，从基础知识到高级知识，涵盖了 CSS 的所有方面。下面是对教程的详细解释。 01 简介 CSS 是一种描述 HTML 文档样式的语言，它描述了如何在...
css2全面教程.rar_css_css 教程_网站 教程_网站开发
09-19
**CSS2全面教程** 在网页设计与开发领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它负责定义页面的布局、颜色、字体等样式。本教程针对CSS2，是CSS2版本的一个详尽学习资源，特别适合网站开发人员进行...
无涯教程(LearnFk)-CSS教程离线版.pdf
05-13
层叠样式表（Cascading Style Sheets，简称CSS），是一种用于为网页添加样式和格式的计算机语言。它由网页的结构层（HTML或XML等）中的元素以及一系列规则组成，这些规则指定各个元素应该以何种形式在屏幕上显示。...
CSS教程
Ymh_Sirius的博客
04-30 328
CSS概述 1.1. 什么是CSS? 层叠样式表(Cascading Style Sheet ),定义了如何显示HTML元素，用来控制网页的样式和布局。 未设计CSS的页面 <html> <head> <title>Hello!</tit...
CSS(一)
shi199434的博客
12-06 267
CSS 教程 通过使用 CSS 我们可以大大提升网页开发的工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。 各章节实例 本 CSS 教程包含了数百个CSS在线实例 通过本站的在线编辑器，你可以在线编辑CSS,并且可以在线查看修改后的效果。 CSS 实例 body{ background-color:#
CSS 教程
05-07 95
CSS 教程链接:http://www.netvtm.com/w3/css/ ...
css的全教程
weixin_41767962的博客
05-03 1519
1.什么是css3？ 在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。 2.css3边框 圆角效果border-radius 3.css3边框 阴影 box-shadow box-shadow是向盒子添加阴影。支持添加一个或者多个。 box...
CSS入门 超详细
weixin_55816781的博客
04-12 7801
CSS 一基础认知 1.1：css的介绍 css：层叠样式表 css作用：给页面中的HTML标签设置样式 1.2css语法规则 写在哪里 css写在style标签中，style标签一般写在head标签里面，title标签下面 样式： 选择器{ 属性名:属性值; } 1.3css初体验 常见属性： color：文字颜色 font-size:字体大小 background-color:背景颜色 width:宽度 height：高度 <!DOCTYPE html> <html lang="e
学习CSS3这一篇就够了
热门推荐
轻松的小希
11-25 4万+
目录CSS第一章 CSS概述1.1、概述1.2、语法1.3、注释1.4、如何创建并引用1.4.1、外部样式表（外联式）1.4.2、内部样式表（内联式）1.4.3、内联样式（行内式）1.5、三种引入优先级第二章 CSS选择器2.1、id选择器2.2、class选择器2.3、标签选择器2.4、子代选择器2.5、后代选择器2.6、相邻兄弟选择器2.7、后续兄弟选择器2.8、交集选择器2.9、并集选择器2.10、通配符选择器2.11、伪类选择器2.11.1、anchor伪类2.11.2、input伪类2.11.3、
Div+CSS布局教程全解析
"这是一份由博客园用户JesseZhao整理的《Div+CSS布局大全》教程，包含了丰富的实例和基础知识，旨在帮助读者掌握网页设计中的DIV+CSS技术。教程覆盖了从入门到进阶的多个方面，包括DOCTYPE选择、名字空间、语言编码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值