为网页添加样式 术语解释 选择器 id选择器id 类选择器 class style样式写入行内 外联css样式
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
目录
为网页添加样式
术语解释
CSS规则= 选择器+声明块
选择器
选择器:选中元素
- ID选择器:选中的是对应id值的元素选择范围太小了
写法
<style>
#class{
color: yellowgreen;
}
</style>
<p id="class">Lorem ipsum, dolor sit amet consectetur adi</p>
- 元素选择器 选择范围太广了
h1{
color: aqua;
background-color: yellow;
text-align: center;
}
<h1>
准备设置样式
</h1>
- 类选择器 (常用)
写法 . 类名{ } class=“类名”
.red{
color: red;
}
/* 这里设置字体与字体大小 */
.bac{
font-size: 3em;
text-align: center;
}
调用的格式
<p class="red ">Doloribus accusantium aliquid officia </p>
<!-- 一个标签里可以调用多个类名 -->
<p class="red bac">Possimus excepturi eum eaque adipis </p>
声明块属性
每一个声明(属性)表达了某一方面的样式
出现在大括号中
声明块中包含很多声明(属性)。每一个声明(属性)表达了某一方面的样式。
例如
font-size: 3em;
text-align: center;
Css代码书写位置
1. 内部样式表
- style的书写位置不一定要放在head里也可以放到body里
- 但放到head里的原因是因为希望浏览器优先加载css内容不然网页加载时容易卡顿 才恢复样式
2. 内联样式表元素样式表
- 直接书写在元素的style属性中
- 这种写法就不需要再写选择器
<p style="color: violet;">Lorem ipsum dolor sit amet</p>
3. 外部样式表常用
将样式书写到独立的css文件中。|
使用link 进行css文件的调用
- rel表示的是链接的类型 stylesheet是指样式表
- href: 文件相对路径
<link rel="stylesheet" href="./1.样式设置.html">
外部样式好处
- 外部样式可以解决多页面样式重复的问题。
- 有利于浏览器缓存从而提高页面响应速度
- 有利于代码分离(HTML和CSS) ,更容易阅读和维护
代码总结
元素选择器
id选择器
类选择器
内联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: aqua;
}
#size{
background-color: blue;
}
.red{
color: brown;
}
.box{
font-size: 3em;
font-weight: 100;
}
</style>
</head>
<body>
<h1>这是元素选择器</h1>
<p id="size">这是id选择器</p>
<p class="red">这是一个类选择器</p>
<p class="red box">这是两个类选择器</p>
<p style="color: chartreuse;">这是内联样式</p>
</body>
</html>