CSS入门以及CSS样式总结

最新推荐文章于 2021-06-03 05:44:27 发布
最新推荐文章于 2021-06-03 05:44:27 发布
阅读量162 收藏 1
点赞数 1
分类专栏： Web前端 文章标签： web CSS 基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40933663/article/details/88075686
版权

CSS

Cascading Style Sheets：层叠样式表，美化网页的

为什么使用CSS：可以很方便地去指定标签的样式

CSS书写格式

标签名称{
    CSS属性（property）：CSS属性值（value）；
}

CSS文本

在这里插入图片描述
图片来源：W3Shool

文本样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS文本</title>
		<style type="text/css">
			body{
				/*文本颜色*/
				color: #0000FF;
				
				/*line-height:行高*/
				line-height: 30px;
				
				/*文本修饰：text-decoratior
				*	值:underline:上划线;
				*		overline:上划线;
				*		linethrough:中划线
				* 		none：设置无
				 */
				text-decoration: underlineline;
				
				/*letter-spacing：字符间距*/
				letter-spacing: 10px;
				
				/*word-spacing：单词间距*/
				word-spacing: 10px;
			}
		</style>
	</head>
	<body>
		好好 学习 ， 天天 向上！
	</body>
</html>

结果展示：
在这里插入图片描述

CSS字体

字体系列：一定是当前存在的字体类型
在这里插入图片描述
图片来源：W3Shool

CSS背景

在这里插入图片描述
图片来源：W3Shool

background-repea：url(img/xx.jpg);

background-repeat：设置图片是否重复以及如何重复
样式值：

  • repeat：默认的，X轴和Y轴都在重复
  • no-repeat：不重复，图片的位置（默认左上角）
  • repeat-x：X轴重复
  • repeat-y：Y轴重复

CSS表格

在这里插入图片描述
图片来源：W3Shool

CSS边框

在这里插入图片描述
图片来源：W3Shool

默认的方向：上 下 左 右
border的简写属性： 边框宽度 边框样式 边框颜色；
如果设置边框四边：颜色/宽度/样式：某一边没有设置，就会拿对边的颜色/宽度/样式

如果想要显示效果，必须设置边框的样式属性：

  • solid：单实线
  • dubbo：双实线
  • dashed：虚线
  • dotted：点

一般使用简写属性的方法设置边框属性：

/*边框的简写属性：
  border:边框宽度 边框颜色 边框颜色；
 * */
border:10px solid #000 ;

边框样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS边框样式</title>
		<style>
			div{
				
				/*设置边框的颜色*/
				/*border-top-color: #F00;
				border-left-color: #00F;
				border-right-color: #0F0;
				border-bottom-color: #C90;*/
				
				/*边框颜色的简写属性*/
				/*border-color: #F00 ;*/
				
				
				/*设置边框的宽度*/
				/*border-top-width: 10px;
				border-left-width: 20px;
				border-right-width: 30px;
				border-bottom-width: 40px;*/
				
				/*边框宽度的简写属性*/
				/*border-width: 5px ;*/
			
				/*border-top-style: solid;
				border-left-style: double
				border-right-style: dotted;
				border-bottom-style: dotted;
				*/
				/*边框样式的简写属性*/
				/*border-style:solid ; */ 
				
				
				/*边框的简写属性
				  border:边框宽度 边框颜色 边框颜色；
				 * */
				border:10px solid #000 ;
			}
		</style>
	</head>
	
	<body>
		<div>div1</div>
		<hr />
		<div>div2</div>
	</body>
</html>

结果展示：
在这里插入图片描述

CSS列表

在这里插入图片描述
图片来源：W3Shool

引入方式和选择器

参考博文：
https://blog.csdn.net/qq_40933663/article/details/88077347

Sasura_321
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用CSS美化网页
DesertOrchid的博客
12-03 827
CSS(Cascading Style Sheet=层叠样式表)，用于控制网页元素样式显示的标记性语言，可以将网页结构和样式进行分离。主要负责网页的美化，HMTL负责网页的结构设计。 CSS的基本语法 CSS样式规则=选择器+声明 选择器(样式名称)： ①自定义类：所有类样式均以“.”开头，可以将属性及样式应用于任何文本或文本块。例如，“.green”的类样式； ②HTML标签：可以对特定标...
css基础-对网页进行美化
QEcode的博客
10-21 859
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页</title> <style type="text/css"> /** * 用css对页面进行美化 */ /*设置整体页面*/ body{ mar
CSS样式的一些总结
weixin_44574132的博客
02-24 349
                              关于CSS样式的一些总结 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： CSS样式 作者：麦胜福 撰写时间：2019-02-02 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
CSS样式表规划经验总结
小柯南小技术
11-23 577
最近看到一些关于CSS文件管理的问题，下面我就自己的经验说说，一个好的CSS文件主要是看他是否具有易维护性。下面我就说说我个人的看法： 一、CSS文件的规划         我在规划CSS的时候，我比较喜欢建立全局css及各模块css。在html页面中引用全局css，在全局css中引用各模块css。比如，建立global.css为全局css，在全局css中定义“* { … } body
css样式表的知识点总结
weixin_30823833的博客
02-25 122
css总的来说有三种css样式可供选择： 1，行内样式表 　　行内样式表，直接写在了html文件的元素中，例如： 　　<div style="color:red;"></div> 2，页内嵌入样式 　　页内嵌入样式是利用style标签将样式表的内容直接写在html文件的head标签中，例如： 　　<head> 　　　　<style&...
css入门入门入门入门
最新发布
05-23
在本文中，我们将深入探讨CSS的基础知识，包括它的核心概念、用途以及如何通过预处理器提升效率。 首先，我们需要理解CSS的基本原理。CSS与HTML紧密配合，HTML负责结构化内容，而CSS则负责呈现这些内容的视觉样式。...
CSS入门教程篇
10-30
CSS入门教程
15个必须阅读的CSS入门文章
12-02
这15条，收集拉在一起，最好的一些必须阅读博客为希望得到任何人的职位与CSS样式开始。 用CSS Reset重置你的CSS样式表 学习CSS定位的10个步骤 Internet Explorer和CSS box模型 Specifics on CSS Specificity ...
html+css入门到实战源码
12-09
HTML（HyperText Markup Language）用于...通过这个"html+css入门到实战源码"的学习资源，你将能够逐步掌握前端开发的基础，为未来的网页设计和开发工作打下坚实的基础。不断实践，勇于探索，你将在前端领域走得更远。
HTML+CSS的入门知识点总结
09-20
HTML+CSS入门知识点总结 HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而CSS（Cascading Style Sheets）是用于控制网页样式的语言。本文将总结HTML+CSS的入门知识点，涵盖HTML的基本结构、CSS...
CSS样式表引用方式
wycsniper的专栏
10-31 654
最近讲课中，有些学员对调用样式表老是有含糊不清？大体说来有四种方式: 1、外部文件引用方式；(推荐使用) 2、使用@import引用外部CSS文件; 3、内部文档头方式也叫内嵌法调用； 4、直接插入式也叫行内样式。 它们主要的差别在于它们规定的风格使用的范围不同： 　　一、外部文件引用方式 　　外部文件引用方式即将CSS写成一个文件，在HTML文档头通
总结：用CSS进行网页样式设计攻略全集
武安候的专栏
10-16 971
66网络学院欢迎您..转载本站文章请注明出处　　一.使用css缩写　　使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法结见附》，这里就不展开描述。　　二.明确定义单位，除非值为0　　忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写ABA="100"，但是在CSS中，你必须给一个准确的单位，比如:width:100p
css三种引入方式及格式
jt18729260336的博客
09-06 1180
一：行内式（内联样式） 其基本语法格式如下： &lt;标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"&gt; 内容 &lt;/标签名 如： &lt;div style="color: red; font-size: 12px;"&gt;行内式&lt;/div&gt; 二：内部样式表（内嵌样式表） 其基本语法格式如下： &lt;head&gt;
CSS之三种样式表的引入方式
蟹黄堡
05-11 2212
CSS的三种样式表 按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为以下三大类： 行内样式表（行内式） 内部样式表（嵌入式） 外部样式表（链接式） 1.行内样式表 行内样式表的语法格式如下： <div style="color: blue; font-size: 16px;">测试</div> 注意： 1、行内样式表是在元素标签内部的style属性中设定CSS样式，只适用于修改简单的样式 2.内部样式表 内部样式表的语法格式如下： <style&gt
使用css技术美化网页
yibashou的博客
07-17 3000
1、引入css的代码有内行式与外联式的标签。 &lt;标记名 style=“属性1：属性1值；属性2：属性2值；”&gt;内容&lt;/标记名&gt;         标记名就是标签的名字 2、引入css的内嵌式的方式 &lt;head&gt; &lt;title&gt;标题&lt;/title&gt; &lt;style type="text/css"&gt; 选择器{属性1：属
CSS学习总结（3）--- 使用CSS美化网页
qq_44823091的博客
06-20 1197
JAVA Web — CSS美化网页 使用CSS美化网页的原因？ 可以有效的传递页面信息。 使用CSS美化过的页面文本，漂亮、美观，可以吸引用户 可以很好的突出页面的主题内容，使用户第一眼可以看到页面的主要内容 具有很好的用户体验 等等 span标签： 行内元素 作用：可以让某些文字或者某个词语凸显出来。 <style> #dream{ font...
CSS：简述、三种引入方式、CSS选择器、书写格式
平安学习日记
03-08 892
CSS简述 CSS：层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件形式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 简单来说CSS就是静态地美化网页。 CSS的引入 1、行内引入 特点：只能给某个元素对象添加样式 <!--行内样式--> <p style="color: re...
CSS基础知识------CSS美化网页
weixin_44821216的博客
06-18 554
为什么使用css美化网页 1.可以有效地传递页面信息 2.使用css美化过的页面文本漂亮、美观、可以吸引用户 3.可以很好的突出页面的主题内容，使用户第一眼可以看到页面的主要内容 4.具有良好的用户体验 css字体 css字体属性定义文本的字体系列、大小、加粗、风格（如斜体等）和变形（如小型大写字母）。 设置字体类型 font-family用来设置字体类型。例如 font-family:"隶书";...
html中引入css样式表的三种方式,css样式表的三种引入方式以及优缺点
weixin_39894932的博客
06-03 1219
按照惯例，首先介绍第一种，也是最容易入手的一种， 专业名字叫作行间样式表。二话不说，先上图。行间样式表这是直接在标签里的style属性里进行样式设置的一种方式，当然后面会提到这种方式的优先级会高于其他两种。然后就是它的优缺点了，首先优点：不会产生额外的请求。缺点：一、容易产生重复的代码，造成文档体积变大。二、不利于维护。三、不符合结构与样式分离的规范。第二种专业名字叫作内部样式表，也是先上图。内部...
HTML及CSS1
08-08
本文主要介绍了HTML中的样式表（CSS）的基本用法，包括如何插入CSS、语法结构、颜色表示、多重声明、大小写规则、标签的特定样式以及ID选择器和类选择器的应用。" 在HTML中，CSS用于定义元素的样式，提供了丰富的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值