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

最新推荐文章于 2022-10-20 11:00:52 发布

拾玥花开

最新推荐文章于 2022-10-20 11:00:52 发布

阅读量415

点赞数 3

文章标签： html css css3 html5

本文链接：https://blog.csdn.net/weixin_44691513/article/details/104189014

版权

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
评论
02.CSS基本样式和元素选择器

CSS基本样式和元素选择器1.什么是CSSCSS：层叠样式表（Cascading Style Sheets，简写CSS），是一种用来为HTML文档添加样式（字体、间距、位置、颜色、角度等显示效果）的计算机语言。简单来说，HTML是内容的展示，而CSS是对内容的修饰。2.CSS的引用方式①行内样式：在需要的标签内直接书写< div style=“d代码”> 内容< /div...
复制链接

扫一扫