CSS基础学习笔记
一、CSS简介
1、CSS俗称（层叠样式表、CSS样式表、级联样式表）
2、组成：选择器以及一条或多条声明
3、规范建议
1、属性值前面，冒号后面，保留一个空格
2、选择器（标签）和大括号中间保留空格
3、样式代码采用展开式风格
4、里面所有单词用小写
4、命名规范
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
CSSID的命名
外套:wrap
主导航:mainNav
子导航:subnav
页脚:footer
整个页面:content
页眉:header
页脚:footer
商标:label
标题:title
主导航:mainNav(globalNav)
顶导航:topnav
边导航:sidebar
左导航:leftsideBar
右导航:rightsideBar
旗志:logo
标语:banner
菜单内容1:menu1Content
菜单容量:menuContainer
子菜单:submenu
边导航图标:sidebarIcon
注释:note
面包屑:breadCrumb(即页面所处位置导航提示)
容器:container
内容:content
搜索:search
登陆:login
功能区:shop(如购物车，收银台)
当前的current
样式文件命名
主要的:master.css
布局版面:layout.css
专栏:columns.css
文字:font.css
打印样式:print.css
主题:themes.css
二、CSS基础选择器
1、标签选择器
html标签名称作为选择器,能快速设置同一类型的,但不能设计差异化
<style type="text/css">
p {
color: green;
}
div {
color: red;
}
</style>
2、类选择器
1、单独选择一个或者某几个标签
"."加上自己定义的类名（不要使用纯数字、中文等命名），一个名称可以被多次使用（这是和id选择器的区别）
.red {
color: red;
}
<li class="red">哈哈哈</li>
2、多类名的使用
多个类名之间必须用空格分开
.box{
width: 100px;
height: 100px;
}
.myred {
background-color: red;
}
.mygreen {
background-color: green;
}
<div class="box myred"></div>
<div class="box mygreen"></div>
<div class="box myred"></div>
使用场景
把相同的样式放在一个类里面，可以便于修改，减少代码
3、id选择器
通过#去定义，一个名称只能调用一次，另外的标签不可以再使用
#pink {
color: pink;
}
<div id="pink">哈哈哈</div>
注意：类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和javascript搭配使用。
4、通配符选择器
使用 * 定义，他表示选取页面中所有元素（标签）
* {
margin: 0;
padding: 0;
}
三、属性
1、字体系列
1）字体类型font-family
h2 {
font-family: '微软雅黑';
}
各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
2）字体大小font-size
h2 {
font-size: 20px;
}
谷歌浏览器一般默认的文字大小为16px
标题标签比较特殊，需要单独指定大小文字大小
3）字体粗细font-weight
bold 加粗 = 700
bolder 特粗体
normal 默认值 = 400
number
注意：数字后面不跟单位
.bold {
font-weight: 700;
}
4）文字样式font-style
normal 默认值
italic 斜体
p {
font-style: italic;
}
5）字体的复合属性
注意：顺序不能颠倒，字号和字体必须同时出现
div {
/* font: font-style font-weight font-size/line-height font-family; */
font: italic 700 16px/20px 'Microsoft yahei';
}
2、文本系列
1）文本颜色color
三种方式
div {
/* color: deeppink; */
/* color: #FF0000; */
color: rgb(248, 29, 255);
}
2）对齐文本text-align
用于设置元素内文本内容的水平对齐方式
默认向左对齐
h1 {
/* text-align: center; */
text-align: right;
}
3）装饰文本text-decoration
none 默认，没有装饰线（最常用）
underline 下划线
overline 上划线
line-through 删除线
h2 {
/* text-decoration: underline; */
/* text-decoration: overline; */
/* text-decoration: none; */
text-decoration: line-through;
}
4）文本缩进text-indent
p {
text-indent: 2em;
}
em是一个相对单位，就是当前元素1个文字的大小
5）行间距line-height
文本高度+上间距+下间距（建议使用Fscapture工具测量）
p {
line-height: 26px;
}
3、引入方式
1）行内样式表
适合修改简单的样式
<h2 style="color: red;">哈哈哈</h2>
2）内部样式表
方便控制整个页面中的元素样式设置
<style>
div {
color: red;
}
</style>
3）外部样式表
样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
1、在CSS文件中写
div {
color: pink;
font-size: 26px;
}
2、在html页面中引入
<link rel="stylesheet" href="style.css" />
4、综合实例
CSS文件写：
#p1 {
font-size: 10px;
text-align: center;
color: lightgrey;
}
#pp {
text-indent: 2em;
}
#p2 {
color: lightgrey;
font-size: 10px;
text-indent: 2em;
}
html文件写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新闻页面</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 style="text-align: center;">北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
<p id="p1">
2020-11-21 19:17:30 来源：
<a href="#">中国天气网</a>
<input type="text" value="请输入查询条件..." />
<input type="submit" value="搜索" />
</p>
<hr />
<p id="pp">中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
<h3>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h3>
<center><img src="img/pic.jpeg"/></center>
<p id="pp">今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
最低0.47元/天 解锁文章
5880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
