HTML中嵌入CSS样式的三种方式

最新推荐文章于 2024-08-20 09:26:37 发布

少年西西

最新推荐文章于 2024-08-20 09:26:37 发布

阅读量4k

点赞数 4

分类专栏： D_JavaWeb阶段 # D1_HTML与CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_45554909/article/details/111463675

版权

D_JavaWeb阶段同时被 2 个专栏收录

104 篇文章 2 订阅

订阅专栏

D1_HTML与CSS

16 篇文章 0 订阅

订阅专栏

1、什么是CSS，有什么作用？

CSS(Cascading Style Sheet):层叠样式表语言，是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
CSS的作用是：
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
CSS好比是HTML的化妆品一样。
HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。

2、方式一、内联定义方式

第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。

语法格式：

<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>

width 宽度样式
height 高度样式
background-color 背景色样式
display 布局样式（none表示隐藏，block表示显示div标签默认为block
border:边框
1px：边框大小
solid:实线边框
position定位: static | absolute | fixed | relative
static  :　 默认值。无特殊定位，对象遵循HTML定位规则
absolute  :　 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个
最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed  :　 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative  :　 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
placeholder="请输入编号":文本框内默认的文字

<body>
<div style="width:100px;height:100px;background-color:#b882ff;border : 1px solid red;">div1</div>
<div style="width:100px;height:50px;background-color:#abff53; position:absolute;right:800px"></div>
<span style="width:200px;height: 100px;background-color: #ff4f96;position:absolute;bottom:0px">span1</span>
<span>span2</span>
</body>

在这里插入图片描述

3、方式二：样式块方式。

第二种方式：在head标签中使用style块，这种方式被称为样式块方式。
语法格式：

<head>
	<style type="text/css">
		选择器 {
			样式名 : 样式值;
			样式名 : 样式值;
			.....
		}
		选择器 {
			样式名 : 样式值;
			样式名 : 样式值;
			.....
		}
	</style>
</head>

3.1、id选择器

/*
    id择器
    语法格式：
    #id{
    样式名 : 样式值;
    样式名 : 样式值;
    样式名 : 样式值;
    ....
    }
*/
#usernameErrormsg{
    font-size: 12px;
    color: red;
}
<!--
    设置样式字体大小12px，颜色为红色！
-->
<span id="usernameErrormsg">对不起用户名不能为空</span>

在这里插入图片描述

问题：这种方式的缺点？
1.如果标签多了。样式多了。代码量非常庞大。
2.可读性非常差。
3.Css 代码没什么复用性可方言

3.2、标签选择器

/*
    标签择器
    语法格式：
    标签名 {
    样式名 : 样式值;
    样式名 : 样式值;
    样式名 : 样式值;
    ....
}
标签择器作用的范围比id择器广。
*/
div{
    width : 100px;
    height : 100px;
    border: 2px solid #8b0d00;
    background-color: #b882ff;
}
<div></div>
<div></div>
<div></div>

在这里插入图片描述

3.3、类选择器

/*
    类择器
    语法格式：
    .类名{
    样式名 : 样式值;
    样式名 : 样式值;
    样式名 : 样式值;
    ....
    }
*/
.student{
    border: 1px solid black;
    width: 100px;
    height: 20px;
}
<!--class相同的标签可以认为是同一类标签。-->
<br/><br/><br/>
学生姓名<input type="text" class="student">
<br/>
学历<select class="student">
    <option>本科</option>
    <option>硕士</option>
</select>

问题：这种方式的缺点。
1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了

4、方式三：链入外部样式表文件

第三种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）

语法格式：

<head>
<link type="text/css" rel="stylesheet" href="css文件的路径" />
</head>

这种方式易维护，维护成本较低。
css文件内容：

a{
    text-decoration : none;
}
/*
	cursor : 鼠标样式，pointer是小手，hand也是，但是hand浏览器兼容问题。建议使用pointer
*/
#baidu{
    text-decoration :underline;
    cursor : pointer;
}

html文件内容：

<head>
    <meta charset="UTF-8">
    <title>在HTML中使用CSS样式的第种方式：引入外部独立的css文件</title>
    <!-- <link type="text/css" rel="stylesheet" href="css文件的路径" />-->
    <!--引入css-->
    <link type="text/css" rel="stylesheet" href="003.css"/>
</head>
<body>
<!--去掉下划线-->
<a href="http://www.baidu.com">百度</a><br/>
<!--小手了也下划线了，但仍然只是个简单的文本，不是超链接，不能跳转-->
<span id="baidu">百度</span>

</body>

5、组合选择器

组合择器的格式是：
择器 1，择器 2，择器 n{
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
…
}
组合择器可以让多个选择器共用同一个 css 样式代码

  <style type="text/css">
        #userid,.username,div{
            color: red;
        }
    </style>
</head>
<body>
学生账号<input type="text" id="userid" name="username" value="1234">
<br/>
<span class="username">学生密码</span>
<div>1111</div>

</body>