CSS基础知识(一)

最新推荐文章于 2022-07-07 11:53:16 发布
最新推荐文章于 2022-07-07 11:53:16 发布
阅读量131 收藏
点赞数
分类专栏： # CSS 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45419127/article/details/115270135
版权

为什么出现CSS?

  • HTML满足不了设计者的需求
  • HTML操作属性不方便
  • HTML里面添加样式带来的是臃肿和繁琐

CSS

CSS：层叠样式表 设置网页外观的样式

css的书写方式

行内样式表

通过style的属性值来设置元素的样式

<标签名 style="属性1:属性值1; 属性2:属性值2;">内容</标签名>

注意事项

  1. style便是元素的属性
  2. 属性与属性值之间用:相隔
  3. 多组属性值之间用;相隔
  4. 没有实现元素样式和结构相分离
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式表</title>
</head>
<body>
<h2 style="font-family: '楷体'; color: blue;  ">行内样式表</h2>
</body>
</html>

在这里插入图片描述

内联样式表

 将CSS代码写在<head></head>之间  并用style标签定义


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式表</title>
    <style>
        p {
            color:red;
            font-family: '楷体';
        }
    </style>
</head>
<body>
    <p>内联样式表</p>
</body>
</html>

在这里插入图片描述

外部样式表

将样式表放入一个或多个以.css扩展名的文件中 ，用link标签将样式表引入html文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外链样式表</title>
    <link rel="stylesheet" href="./stylesheet.css">
</head>
<body>
    <p>外链样式表</p>
</body>
</html>

stylesheet.css

p {
    color: red;
    font-size: 25px;
    font-family:'楷体';

}

在这里插入图片描述

在这里插入图片描述

CSS样式表总结

在这里插入图片描述

选择器

作用：找到特定的页面HTML元素

标签选择器

优点: 能够快速为某一类元素设置样式

缺点： 不能设计差异化样式。

   选择器 {属性1:属性值1; 属性2:属性值2;  属性3:属性值3;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        h2 {
            color: red;
            font-size: 25px;
            font-family: '楷体';
        }
    </style>
</head>
<body>
    <h2>标签选择器</h2>
</body>
</html>

在这里插入图片描述

类选择器

可为一个或某几个元素设置相同的样式 类名用英语表示，见命之意。

.类名 {
    属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3;
    属性4:属性值4;
    
}

<标签  class="类名" >内容</标签>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .c-red {
            color: red;
        }

    </style>
</head>
<body>
    <div class="c-red">Hello Word</div>
    <span class="c-red">hello Word</span>
</body>
</html>

在这里插入图片描述

谷歌案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Google案例</title>
    <style>
        span {
            font-size: 100px;
        }
        .c-blue {
            color: blue;
        }
        .c-red {
            color: red;
        }
        .c-yellow {
            color: yellow;
        }
        .c-green {
            color: green;
        }


    </style>
</head>
<body>
    <span class="c-blue">G</span>
    <span class="c-yellow">o</span>
    <span class="c-red">o</span>
    <span class="c-blue">g</span>
    <span class="c-green">l</span>
    <span class="c-red">e</span>
</body>
</html>

在这里插入图片描述

多类名选择器

标签可以拥有多个类名，以达到更好的目的。类名之间用空格相隔开。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名选择器</title>
    <style>
        .c-red {
            color: red;
        }
        
        .f-family {
            font-family: '楷体';
        }
    </style>

</head>

<body>
    <div class="c-red f-family"> 多类名选择器</div>
</body>

</html>

在这里插入图片描述

id选择器

#id名 { 属性1:属性值1;
        属性2:属性值2;
        属性3:属性值3;
        属性4:属性值4;
    }

<标签 id="id名">内容</标签>

注意事项

  • ID选择器是唯一的，一个标签只能拥有一个id名
  • id选择器和类选择唯一的区别在于使用次数上
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID选择器</title>
    <style>
        #c-red {
            color: red;
        }
    </style>
</head>

<body>
    <div id='c-red'>ID选择器</div>
</body>

</html>

在这里插入图片描述

通配符选择器

选择页面中所有的标签设置相同的样式,建议不要轻易使用

    * {
        属性1:属性值1;
        属性2:属性值2;
        属性3:属性值3;
        属性4:属性值4;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>

<body>
    <div>Hello word</div>
    <p>Hello Word</p>
    <span>Hello Word</span>
</body>

</html>

在这里插入图片描述

CSS字体

font-size

作用：设置字号

image.png

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				font-size: 16px;
			}
			
			h1 {
				/* em：当前对象的文本尺寸 */
				font-size: 2em;
			}
		</style>
	</head>
	<body>
		<h1>Hello Word</h1>
	</body>
</html>

在这里插入图片描述

注意事项

不同浏览器的默认字号都不一样，因此直接给body设置默认字号。

font-family

font-family:设置字体

{font-family: "agency fb","microsoft yahei",'楷体';}

注意事项

  • 可以指定多个字体，字体之间用英文状态下逗号相隔
  • 英文的字体要用""包裹

unicode字体

image.png

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding:0;
			}
			h2 {
				font-family: "agency fb","microsoft yahei",'楷体'
				}
		</style>
	</head>
	<body>
		<h2>Hello word</h2>
	</body>
</html>

在这里插入图片描述

fon-weight

font-weiht：字体粗细

image.png

注意事项

可以用HTML实现加粗效果 也可以用css实现 但没有语义

样式

   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span:nth-of-type(1){
				font-weight: bold;
			}
			span:nth-of-type(2){
				font-weight: normal;
			}
		</style>
	</head>
	<body>
		<span>Hello Word</span>
		<span>Hello MyWord</span>
	</body>
</html>

在这里插入图片描述

font-style

font-style:字体倾斜

image.png

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p:nth-of-type(1){
				font-style: normal;
			}
			p:nth-of-type(2){
				font-style: italic;
			}
		</style>
	</head>
	<body>
		<p>hello word</p>
		<p>hello word</p>
	</body>
</html>

在这里插入图片描述

font综合写法

选择器 {font:font-style font-weight font-size/line-height font-family}

注意事项

不能省略font-size font-family两个属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            p {
                font:normal normal 50px '楷体'
            }
        </style>
	</head>
	<body>
        <p>WEB前端</p>
	</body>
</html>

在这里插入图片描述

CSS外观属性

color

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            h2 {
                color: red;
            }
            h4 {
                color: #00ff00;
            }
            h6 {
                color: rgb(255,0,0);
            }
            
        </style>
	</head>
	<body>
        <h2>Hello Word</h2>
        <h4>Hello Word</h4>
        <h6>Hello Word</h6>
	</body>
</html>

在这里插入图片描述

text-align

text-align:文本水平对齐方式

在这里插入图片描述

注意事项

是让盒子的内容水平居中 而不是让盒子水平居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            h2 {
                text-align: center;
            }
        </style>
	</head>
	<body>
        <h2>Hello Word</h2>
	</body>
</html>

在这里插入图片描述

line-height

line-height:行高

一般情况下 行高比默认字体大7 8像素即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                font-size: 16px;
            }
            p {
                line-height: 25px;
            }
        </style>
	</head>
	<body>
       <p>赤道略略鼓，两极稍稍扁。自西向东转，时间始变迁。南北为纬线，相对成等圈。东西为经线，独成平行圈；赤道为最长，两极化为点。</p>
       <p>赤道略略鼓，两极稍稍扁。自西向东转，时间始变迁。南北为纬线，相对成等圈。东西为经线，独成平行圈；赤道为最长，两极化为点。</p>
	</body>
</html>

在这里插入图片描述

text-indent

text-indent:首行缩进 一般用em表示 1em等于一个汉字的宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            p {
                text-indent: 2em;
            }
        </style>
	</head>
	<body>
        <p>赤道略略鼓，两极稍稍扁。自西向东转，时间始变迁。南北为纬线，相对成等圈。东西为经线，独成平行圈；赤道为最长，两极化为点。</p>
        <p>赤道略略鼓，两极稍稍扁。自西向东转，时间始变迁。南北为纬线，相对成等圈。东西为经线，独成平行圈；赤道为最长，两极化为点。</p>
	</body>
</html>

在这里插入图片描述

text-decoration

text-decoration:文本装饰

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            p:nth-of-type(1){
                text-decoration: none;
            }
            p:nth-of-type(2){
                text-decoration: underline;
            }
            p:nth-of-type(3){
                text-decoration: overline;
            }
            p:nth-of-type(4){
                text-decoration: line-through;
            }
        </style>
	</head>
	<body>
        <p>hello word</p>
        <p>hello word</p>
        <p>hello word</p>
        <p>hello word</p>
	</body>
</html>

在这里插入图片描述

css外观总结

image.png

开发工具

快捷方式

  • f12
  • ctrl+shift+I
  • 右击检查 即可打开

注意事项

左侧是结构 右侧是样式
在这里插入图片描述

在这里插入图片描述

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础知识.docx
07-23
CSS 基础知识总结 一、CSS 盒子模型 CSS 盒子模型是指浏览器对 HTML 元素进行渲染和布局的方式。主要有两种盒子模型，即 W3C 盒子模型和 IE 盒子模型。 1. W3C 盒子模型（标准盒子模型）：盒子实际内容（content...
CSS基础知识
07-22
资源名称：CSS基础知识内容简介：0、基础知识1、CSS概述2、CSS基础语法3、CSS选择器4、CSS主要属性5、CSS核心机制-盒子模型6、CSS重点和难点-定位7、综合示例浏览器模式 当浏览器厂商开始创建于标准兼容的浏览器时...
CSS设置字体为楷体
hellostory的专栏
11-25 3万+
<br />测试环境：windows 2003 + IE6<br />实现代码：font-family: "楷体","楷体_GB2312";
css设置各种中文字体如雅黑、宋体、楷体
日常笔记/总结/系列知识梳理
04-13 6万+
 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }   css如何设置各种中文字体如雅黑、黑体、宋体、楷体等等 说明： 加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei为微软正黑体，STHeiti为华文黑体，MingLi...
CSS font-family字体大合集
c_qianxia5040的博客
07-07 2万+
以下为font-family常用合集以及一部分文字效果：windows常见内置中文字体宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB2312楷体_GB2312 KaiTi_GB2312宋体：SimSuncss中中文字体（font-family）的英文名称Mac
CSS基础知识超全整理
07-04
整理好的一份关于css的知识大纲，希望能够帮助到大家，可以用来复习回顾
css基础知识之选择器使用示例
09-25
主要介绍了css基础知识中的选择器使用示例,需要的朋友可以参考下
学习CSS需要知道的CSS基础知识
09-25
可设置的CSS属性包括：字体属性、文本属性、颜色及背景属性、边框属性、容器属性（边距属性、填充属性）、分类属性、鼠标属性。
CSS字体样式属性调试
Web_chicken的博客
09-08 7399
CSS字体样式属性调试 1.font-size font-size属性用于设置字号 p { font-size:20px; 2.font-family font-family用于设置字体 p { font-family:"Mirsoft YaHei"； } 网页中常用字体有宋体，微软雅黑，黑体等 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个,直到找到合适的字体，如果都没有，则以我们电脑默认的字体为准。 p { font-family:"Mirsoft YaHei"
css怎么设置font-fam,font-family属性怎么使用
weixin_35782250的博客
08-04 1889
font-family属性是用来设置元素的字体系列，其使用方法：首先创建一个HTML示例文件；然后在body中通过p标签创建文件；最后通过样式“font-family:楷体;”来设置字体即可。本文操作环境：windows7系统、CSS3版、Dell G3电脑。CSS中的font-family属性是用来设置元素的字体系列，如果要指定网页显示的字体，就需要设置font-family属性，下面我们就来具...
html中字体 楷体_css怎么设置字体为楷体？
weixin_39685392的博客
12-22 2912
本篇文章小编将和大家讲讲如何在CSS里设置字体为楷体，还有五类通用字体说明以及其他的字体样式表示，感兴趣的朋友可以看看，希望对你有所帮助。CSS使用font-family属性来定义字体类型。css设置字体为楷体的语句为：font-family: "楷体","楷体_GB2312";习惯上中文网页字体多定义为宋体类型，对于标题或特殊提示信息，如果需要特殊字体，则建议采用图像形式来间接实现。拓展：对于英...
css font-family
siri99999的博客
10-24 574
本文介绍HTML中自带的字体： 黑体：SimHei 宋体：SimSun 新宋体：NSimSun 仿宋：FangSong 楷体：KaiTi 仿宋_GB2312：FangSong_GB2312 楷体_GB2312：KaiTi_GB2312 微软雅黑体：Microsoft YaHei 隶书：LiSu 幼圆：YouYuan 华文细黑：STXihei 华文楷体：STKaiti 华文宋体：STSong 华文中...
CSS font-family 各字体一览表
吃不胖的程序猿历程
08-04 2万+
windows常见内置中文字体 字体中文名 字体英文名宋体                      SimSun（浏览器默认）黑体                      SimHei微软雅黑               Microsoft Yahei微软正黑体            Microsoft JhengHei楷体              ...
Css font-family字体对照表
wuhulala的休息室
08-25 2万+
Css font-family字体对照表 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU
说说 Windows 中的中文字体
weixin_30687811的博客
09-30 591
上一篇说了 Silverlight 中的中文字体，现在来说说 Windows 中的中文字体。 在默认情况下，也就是未自行安装新字体或者 Office 等文字处理软件的情况下，Windows 默认提供下列字体： Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312 Windows XP/2000/2003/ME/NT 宋体/...
CSS font-family 各名称一览表
热门推荐
cc蒲公英的博客
04-25 12万+
windows常见内置中文字体 字体中文名 字体英文名 字体应用 宋体 SimSun（浏览器默认） 中文名 英文名 浏览器默认 黑体 SimHei 中文名 英文名 浏览器默认 微软雅黑 Microsoft Yahei 中文名 英文名 浏览器默认
vue css基础知识
最新发布
09-22
Vue中的CSS基础知识包括以下几点： 1. 类绑定：使用v-bind:class指令，可以根据条件动态地绑定CSS类名。 2. 样式绑定：使用v-bind:style指令，可以绑定一个样式对象，动态地设置元素的样式。 3. 条件渲染：使用v-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值