标签：style -- 标签 color 小白 html font 选择器 css
css 引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 会在html加载完成之后才开始使用 必须在style标签最上方才会生效*/
@import url("01-css使用方法.css");
p {
color: skyblue;
}
/* 1.行内样式 直接在html标签的里面添加style属性
优先级是最高的 影响代码可读性 */
/* 2.内部样式表 在文件内部添加的样式 在head标签里面添加style标签来书写样式 */
/* 3.外部样式表 单独的css文件，通过link标签引入 */
/* 4.外部样式表 @import url(./01-css使用方法.css); 导入css文件
必须写在style标签里面 */
</style>
<!-- link标签 会在html被加载的时候同时使用 -->
<link rel="stylesheet" href="./01-css使用方法.css">
</head>
<body>
<div style="color: aqua;">今天天气真好阿.真热</div>
<p>刚刚想办法解决了一下，试一试吧</p>
<span>没关系，反正我有风扇</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>Document</title>
<style>
div {
/* 文字大小 默认16px 字体大小不允许是负数 最小是0 字体大小最小是10px */
font-size: 56px;
/* 字体主题 默认字体微软雅黑 必须是当前主机中有的字体 可以同时设置多个字体 一个一个查找是否拥有*/
font-family: '华文新魏', '方正舒体';
/* 字体粗细 100 - 900 只允许设置整百位数字 100最细 900最粗 400 - 500正常 */
font-weight: 900;
/* 控制字体风格 倾斜 em i */
font-style: oblique;
/* font: font-style font-weight font-size font-family;*/
font: 89px '华文新魏';
}
/* 文字阴影 */
.box_1 {
/* 水平位置 垂直位置 模糊距离 阴影颜色 */
text-shadow: -5px 0px cyan, 5px 0px red;
/* 前两项是必须写的 后两项可以选写 */
}
</style>
</head>
<body>
<div>预计28日傍晚到29日上午，我市全部区县有大雨</div>
<div class="box_1">享受美好生活</div>
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*基本选择器
!important 权重无限大
行内样式 ： 1 0 0 0
ID选择器 : 0 1 0 0
类名选择器: 0 0 1 0
标签选择器: 0 0 0 1
通配符权重: 0 0 0 0
CSS选择器优先级
!important > 内联样式 > ID选择器 > 类选择器（属性选择器、伪类选择器）
> 元素选择器（标签选择器、伪元素选择器）> 通配符选择器
*/
/* *通配符选择器 当前文件中的全部标签都使用 */
* {
/* 清除页面的默认样式 */
margin: 0;
padding: 0;
}
div {
color: red;
}
/* 标签名称选择器 */
/* class选择器 类选择器 使用.来表示class 可以重复的*/
.box {
color: darkorchid;
}
.box1 {
font-size: 88px;
}
/* id选择器 使用#来表示id 理论上是不允许重复的*/
#obox {
color: yellow;
}
/* 伪类选择器 */
/* 未访问的链接 */
a:link {
color: brown;
}
/* 访问过的链接 */
a:visited {
color: pink;
}
/* 鼠标停留在链接上 */
a:hover {
color: rgb(255, 122, 107)
}
/* 选定的链接 鼠标按压不放 */
a:active {
color: yellowgreen;
}
/* hover和active可以对所有的盒子标签使用 hover必须在active上面才会生效 */
</style>
</head>
<body>
<!-- <div id="obox">震惊！！！！1</div> -->
<div class="box">震惊！！！！2</div>
<div id="obox" class="obox">震惊！！！！3</div>
<div class="box box1">震惊！！！！4</div>
<a href="###">听说日本地震了</a>
<div class="box">听说日本地震了</div>
</body>
</html>
标签：style,
--,
标签,
color,
小白,
html,
font,
选择器,
css
From： https://blog.csdn.net/2301_78949452/article/details/140566770