CSS基础1--基础及语法
2020-09-14 本文已影响0人
伊洛的小屋
CSS 基础
CSS 是Cascading Style Sheet的缩写，翻译为：‘层叠样式表’ 或 ‘级联样式表’。 CSS 定义如何显示HTML的标签样式，用于设计网页的外观效果。通过使用CSS实现页面的内容与表现形式分离，极大的提高了工作的效率
CSS语法
CSS是一门基于规则的语言
h1 {
color: yellow;
font-size: 3em;
}
语法由选择器起头，选择HTML元素，这里对h1标题添加央视大括号中定义属性和值，叫做声明。
冒号之前的是属性，后面的是值。一个CSS样式中可以包含多个规则
CSS模块
CSS是很多模块构成的
CSS规范
所有的标准Web技术都被定义在一个巨大的文档中，称作 规范specifications (或者简称为 "specs")，CSS也不例外
简单的应用一下
先来做一个简单的HTML页面
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<body>
<h1>TITLE DEMO</h1>
<p>基金是小白理财最好的投资方式 <span>基金</span>
伊洛的个人网站 <a href="https://yiluotalk.com/">点击前往</a>.</p>
<p>购买指数基金比购买个股风险会小很多 <em>风险</em> 降低风险</p>
<ul>
<li>个股</li>
<li>基金</li>
<li>宽指 <em>基金</em></li>
</ul>
</body>
</html>
打开网页
现在用CSS美化一下网页
添加CSS
让HTML文档能够遵守我们给它的CSS规则，在文档的开头链接CSS,在head里面添加链接到CSS文件
在CSS文件中编写内容,让上面的标题显示紫色
h1 {
color: purple;
}
打开浏览器查看效果
样式化 HTML 元素
样式化一个文档中所有的段落，使用选择器p,用逗号可以将不同选择器隔开
h1 {
color: purple;
}
p, li {
color: cornflowerblue;
}
打开浏览器
改变元素的默认行为
忽略浏览器默认的样式
h1 {
color: purple;
}
p, li{
color: cornflowerblue;
}
li{
list-style-type: none;
}
打开浏览器
可见列表前面的默认样式已经没有了
使用类名
加入类名的特性
公号：伊洛的小屋
个人主页：https://yiluotalk.com/
博客园：https://www.cnblogs.com/yiluotalk/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>CSS</title>
</head>
<body>
<h1>TITLE DEMO</h1>
<p>基金是小白理财最好的投资方式 <span>基金</span>
伊洛的个人网站 <a href="https://yiluotalk.com/">点击前往</a>.</p>
<p>购买指数基金比购买个股风险会小很多 <em>风险</em> 降低风险</p>
<ul>
<li>个股</li>
<li class="special">基金</li>
<li>宽指 <em>基金</em></li>
</ul>
</body>
</html>
打开浏览器
基金的颜色单独发生了变化
根据状态确定样式
取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的
没有被访问的链接颜色变为粉色、访问过的链接变为绿色及鼠标悬停的时候的样式
h1 {
color: purple;
}
p, li{
color: cornflowerblue;
}
li.special {
color: orange;
font-weight: bold;
}
a:link {
color: pink;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
