这篇博客详细介绍了CSS的初步知识，包括其作为HTML美化工具的作用，语言规范，基础选择器，字体和文本属性，以及样式表的三种类型。内容涵盖了选择器分类、复合选择器的使用、元素显示模式，还有谷歌调试工具的使用和Emmet快速生成HTML的技巧。文章还强调了实际案例在学习过程中的重要性，如小米侧边栏和背景图像的设置。
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
一、初学css
1.简介
美化网页，布局页面。
1.1 HTML局限性:
只关注语义。页面丑。
1.2 css:
是一种标记语言，是层叠样式表。用于HTML页面中文本内容（字体大小对齐方式等）、图片外形（宽高边框等）以及版面的布局和外观显示样式。
二、语言规范
1.构成和语法规范
- 选择器和一条或多条声明
- 每组属性为键值对出现：键：值；（：分割；结尾）
2.代码风格
- 样式格式:展开式风格
- 样式大小写：全部小写
- 空格规范：例如：color： red以及p {}选择器以及属性冒号后都要加空格。
三、基础选择器
1.作用
选择标签用的
- 选择标签（选对人）
- 设置样式（做对事）
2.选择器分类
标签选择器：标签名作为选择器（选择一类标签）写上表签名即可，此类标签全部改变。
<style>
p {
color: blue;
}
div {
color: red;
}
</style>类选择器：单独选择一个或某几个标签，利用class属性写
<style>
.red {
color: red;
}
.lvse {
color: seagreen;
}
</style>
<body>
<p class="red">一周年快乐</p>
<p>一周年快乐</p>
<p>一周年快乐</p>
<div class="red">客周求剑</div>
<div>客周求剑</div>
<div class="lvse">客周求剑</div>
</body>
</html>口诀：样式点定义 结构类调用 一个或多个 开发最常用
案例：
<style>
.red {
width: 100px;
height: 100px;
background-color: red;
}
.lvse {
width: 100px;
height: 100px;
background-color: seagreen;
}
</style>
<body>
<div class="red">客周求剑</div>
<div class="lvse">客周求剑</div>
<div class="red">客周求剑</div>
</body>
多类名选择器
更易于修改
<style>
.box {
width: 100px;
height: 100px;
font-size: 50;
}
.red {
background-color: red;
}
</style>
<body>
<div class="box red">客周求剑</div>
<div class="box red">客周求剑</div>
<div class="box red">客周求剑</div>
</body>
</html>id选择器：样式#定义 结构id调用 是能调用一次 别人切勿使用
<style>
#box {
width: 100px;
height: 100px;
font-size: 50;
}
</style>
<body>
<div id="box">客周求剑</div>
<div >客周求剑</div>
<div >客周求剑</div>
</body>id选择器与类选择器：前者有唯一性，像身份证号，后者可以多次使用。
通配符选择器
<style>
/*不需调用，所有标签和元素都会改变*/
* {
width: 100px;
height: 100px;
font-size: 50;
}
</style>
<body>
<div >客周求剑</div>
<div >客周求剑</div>
<div >客周求剑</div>
</body>
四.字体属性
字体系列
font-family类型定义，最好写英文，个字体间用逗号隔开，若电脑没有第一种字体，则用下一种字体。
font-size大小定义，像素后面要加px
font-weight粗细定义，bold变粗，也可以直接使用数字改变，
文字样式
font-style
font-style： nomal 倾斜字体变正常
font-style： itailc 正常字体变倾斜
复合属性
要求：font： font-style font-weight font-size/line-height font-family 顺序不可以改变，空格隔开，不含的属性可以省略，但是font-size和font-family不可省略必须要有
案例
<style>
/*不需调用，所有标签和元素都会改变*/
div {
font: italic 400 50px 微软雅黑;
}
</style>
<body>
<div >客周求剑</div>
<div >客周求剑</div>
<div >客周求剑</div>
</body>
五、css文本属性
文本颜色
RDB代码：coloer： rgb（数字，数字，数字）
可以用十六进制表示，coloer： #十六进制（使用最多，可通过色单吸取）
对齐文本
只能水平对齐，text-align
<style>
/**/
div {
text-align: center;
}
</style>装饰文本
text-decoration
<style>
/*none正常，underine下划线，oveline上划线，line-through删除线*/
div {
text-decoration: underline;
}
</style>
文本缩进
<style>
div {
/*相对当前文本字符单位来定*/
text-indent: 2em;
}
</style>行间距
包括上下间距和文本高度.
<style>
div {
line-height：20xp；/*行高*/
}
</style>
总结
coloer 颜色
text-align对齐
text-indent缩进
text-decoration修饰
line-height行间距
六、三种样式表
1.内部样式表，即写入HTML中，代码结构清晰，嵌入式引入，控制整个标签样式
2.行内压样式表，适合书写简单样式较少情况，写入标签内部<p style="coloer： red">客周求剑</p>，只控制当前标签。
3.外部样式表，适合样式较多情况，单独写入css文件中。
1）新建文件，只写样式没有标签
2）引入<link rel="stylesheet" href="Untitled-2.css">
<link rel="stylesheet" href="Untitled-2.css">/*css*/
div {
color: brown;
}七、谷歌调试工具
F12打开，或右键检查
只能调试，不改变代码，要复制回
八、Emment
1.快速生成HTML4
- 名称+tab键，可*生成多个
- 父子关系用>
- 兄弟关系用+
- $可用于自增
- 有类名#id，.class
2.格式化代码
shift+alt+f
九、复合选择器
1.后代选择器
选择所有的，空格隔开
<style>
ol li {
color: seagreen;
}
</style>
<body>
<ol>
<li>一周年快乐</li>
</ol>
<ol>
<li>一周年快乐</li>
</ol>
<ul>
<li>温周</li>
</ul>
<ul>
<li>温周</li>
</ul>
</body><style>
ol li {
color: skyblue;
}
.nvo li a {
color: seagreen;
}
</style>
<body>
<ol>
<li>一周年快乐</li>
</ol>
<ol class="nvo">
<li>温周</li>
<li><a href="#">温周</a></li>
</ol>
</body> 
2.子选择器
只选择第一代子类，>隔开
ol>li {
color: skyblue;
}
.nvo>a {
color: seagreen;
}
</style>
<body>
<ol>
<li>一周年快乐</li>
</ol>
<ol class="nvo">
<li>温周</li>
<li><a href="#">温周</a></li>
</ol>
3.并集选择器
，分割“和”作用。任何形式
<style>
a,
div {
color: seagreen;
}
</style>
<body>
<ol>
</ol>
<ol class="nvo">
<li>
<div>温周</div>
</li>
<li>一周年快乐</li>
<li><a href="#">温周</a></li>
</ol>
4.伪类选择器
- 链接伪类选择器：1。a:link未被访问的链接 2。a:visited已被访问的链接 3。a:hover鼠标指针所指的链接 4。a:active鼠标按下未弹起的链接（LVHA顺序不要颠倒）
<style> a:link { color: skyblue; } a:visited { color: rgb(235, 180, 135); } a:hover { color: rgb(182, 135, 235); } a:active { color: rgb(235, 135, 152); } </style> <body> <a href="#">温周</a> <a href="http/www.123.com">温周</a> </body>
- ：focus伪类选择器：获得光标的表单选取出来。
<style> input:focus { background-color: skyblue; } </style> <body> <input type="text"> <input type="text"> <input type="text"> </body>
十、元素显示模式
- 两类：块元素和行元素
1.块元素：自己独占一行，可设置高宽以及颜色，如不给宽度则默认与夫亲一样宽，<p>、<h>等文字标签中不能加块元素。
2.行内元素：一行可显示多个，宽高不能直接设置，只能容纳文本等其他行内元素。
3.含内块元素：一行可显示多个，中间有空白缝隙；可设置宽度高度等。
- 模式转换：
行转块：display： block；
<style>
a {
width: 100px;
height: 100px;
background-color: skyblue;
display: block;
}
</style>
<body>
<a href="#">ok
</a>
<a href="#">ok
</a>
</body>块转行：display： inline；
行内块：display：inline-block；
*案例（做）21小米侧边栏
注意：文字行高=盒子高度即可垂直居中。
十一、css背景
背景基本操作
<style>
div {
width: 500px;
height: 500px;
background-color: tan;
/*背景颜色*/
background-image: url(suibian.jpg);
/*背景图片便于控制位置,url()*/
background-repeat: no-repeat;
/*背景平铺,no-repeat不平铺，repeat平铺，repeat-x沿着x轴平铺，repeat-y沿着y轴平铺*/
background-position: top;
/*背景图篇位置（重要）background-position: x y;方位名词background-position: center right;若写一个则默认居中*/
}
</style>
*案例（做）27背景位置
精准单位
x和y轴
background-position: 20px 50px;
background-position: 20px center;/*混合单位*/背景图固定
background-attachment: fixed;
/*背景固定,fixed*/复合写法
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
<style>
div {
width: 500px;
height: 500px;
background: #d2b48c url(img.jpg) repeat fixed center;
}
</style>背景颜色半透明
background: rgba(red, green, blue, alpha);
<style>
div {
width: 500px;
height: 500px;
background: rgba(0, 0, 0, .3);/*最后一位取值0-1*/
}
</style>
案例
<!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>
<link rel="stylesheet" href="Untitled-2.css">
<style>
.nav a {
display: inline-block;
background-color: #7ad351;
width: 2500px;
height: 1500px;
line-height: 58px;
color: #fff;
text-decoration: none;
text-indent: 1.5em;
background-position: center center;
}
.nav .bj1 {
background: url(1.jpg) no-repeat;
}
.nav .bj1:hover {
background: url(zzh.jpg);
}
.nav .bj2 {
background: url(2.jpg) no-repeat;
}
.nav .bj2:hover {
background: url(zzh.jpg);
}
.nav .bj3 {
background: url(3.jpg) no-repeat;
}
.nav .bj3:hover {
background: url(zzh.jpg);
}
.nav .bj4 {
background: url(4.jpg) no-repeat;
}
.nav .bj4:hover {
background: url(zzh.jpg);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bj1">俊哲一周年</a>
<a href="#" class="bj2">俊哲一周年</a>
<a href="#" class="bj3">俊哲一周年</a>
<a href="#" class="bj4">俊哲一周年</a>
</div>
</body>
</html>
扫一扫
1642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
