02.CSS基本样式和元素选择器

CSS基本样式和元素选择器

1.什么是CSS

CSS:层叠样式表(Cascading Style Sheets,简写CSS),是一种用来为HTML文档添加样式(字体、间距、位置、颜色、角度等显示效果)的计算机语言。简单来说,HTML是内容的展示,而CSS是对内容的修饰。

2.CSS的引用方式

行内样式:在需要的标签内直接书写< div style=“d代码”> 内容< /div >,它只针对当前标签生效,写重复样式就会很影响效率。所以一般都不推荐使用。

内部样式:在head标签内新建一个style标签,

<head>
    <style>
    	CSS中的代码注释格式采用的是:/* 注释文字 */
        h1{
        	color="red";
        }
        /* 但是该样式只能在本文件中使用,不能在其他文件中使用*/
    </style>
</head>

外部样式:新建一个css文件,在css文件书写样式,然后在head标签中新建一个link标签,通过href属性设置外部css文件路径。

<link rel="stylesheet" href="这里书写css文件的路径">

3.元素选择器

标签选择器

<head>
    <style>
    	/* 标签选择器 h1~h6,div,span,p,ul,ol,a等等*/
        h1{
			color="blue";
        }
    </style>
</head>
<body>
    <h1>kiva,ixa,oo,delta</h1>
</body>

类选择器

<head>
    <style>
        .leaf{
            color="red";
        }
    </style>
</head>
<body>
   <h1 calss="leaf">dasfnanflasmflkalagnlag</h1>
</body>

id选择器

<head>
    <style>
        /* 
           id选择器和类选择器区别:
           ① W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
           ② 类选择器,好比人的名字,是可以多次重复使用的,比如张伟、王伟、李伟、李娜。
           ③ id选择器,好比人的身份证号码,全中国是唯一的,不得重复。只能使用一次。
        #kiva{
            color="green";
        }
        .class{
            color="yellow";
        }
    </style>
</head>
<body>
    <h1 class="leaf" id="kiva">骑士</h1> <!--显示id的样式,id选择器和类选择器就好比名字和身份证号码,一个身份证号码只能对应一个人,一个名字可以多个人相同-->
</body>

多类名选择器

<head>
    <style>
    	.pink {
            color: pink;
        }
        .font20 {
            font-size: 20px;
        }
        .font14 {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="pink font20">虞姬</div> 
    <div class="font20">明世隐</div>
    <div class="font14 pink">甄姬</div>
    <div class="font14">貂蝉</div>
</body>

4.CSS的基本样式

尺寸样式:width(宽)height(高)

位置样式:水平位置:margin-left,margin-right,垂直位置,margin-top margin-bottom ,它的复合写法:若是四个参数,按照顺时针方向,上右下左, margin: 50px 20px 20px 30px;,两个参数时按照上下,左右,margin: 20px 30px。但是书写时先注意,记得清除默认边距,margin:0,能够减缓浏览器运行压力。

装饰样式:元素颜色,backgrou-color,

颜色的三种写法:

  • 直接写颜色的英文单词。
  • rgb(0-255,0-255,0-255)
  • 十六进制数,,三位或六位。

文字样式:文字大小 font-size,文字字体,font-family,文字颜色 color;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css的基本样式</title>
	<style>
		.box1 {
			/* ① 尺寸样式,设置宽高:宽width 高height */
			width: 800px;
			height: 100px;

			/* ② 位置样式 */
			/* 水平位置 */
			margin-left: 30px;
			margin-right: 20px;
			/* 垂直位置 */
			margin-top: 50px;
			margin-bottom: 20px;
			/* 复合写法 */
			/* 四个参数:上 右 下 左 */
			margin: 50px 20px 20px 30px;
			/* 两个参数:上下 左右 */
			margin: 20px 30px;
			/* 一个参数:四个方向距离一致 */
			margin: 50px;
			/* 清除默认边距 */
			margin: 0;

			/* ③ 背景颜色 */
			/* 颜色值三种写法:
			   1.颜色的单词;
			   2.rgb(0-255,0-255,0-255);
			   3.十六进制数,三位或六位。*/
			background-color: yellow;

			/* ④ 文字样式 */
			/* 文字大小,浏览器默认渲染14px */
			font-size: 20px;
			/* 文字字体 */
			font-family: SimSun;
			/* 文字颜色,颜色写法和背景颜色一致 */
			color: green;
		}
	</style>
</head>
<body>
<div class="box1">
	有生之年,狭路相逢,终不能幸免,手心忽然长出纠缠的曲线。
</div>
<div class="box2">
	懂事之前,情动以后,长不过一天,留不住算不出流年。
</div>
</body>
</html>
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值