CSS 学习笔记 day02
Cascading Style Sheets 层叠样式表
Web前端开发规范手册
命名规则:
头: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
(二)注释的写法:
/ Footer /
内容区
/ End Footer /
(三)id的命名:
(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
基础选择器
标签选择器
可以选出所有相同的标签,比如p
类选择器
id选择器
id选择器,样式#定义,结构id调用,只能调用一次,别人切勿使用
通配符选择器
“*”这里把所有标签元素更改样式
字体属性
字体系列
font-family:“Microsoft Yahei”
字体大小
font-size:16px
字体粗细
font-weight:bold
normal:400
bold:700
文本属性
对齐文本
text-align 本质是让盒子里面的文字水平居中对齐
装饰文本
text-decoration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#">粉红的回忆</a>
</body>
<style>
a{
/*取消a的下划线*/
text-decoration: none;
color:#000;
}
</style>
</html>
文本缩进
text-indent 将段落的首行缩进
em 当前元素一个文字大小的距离
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
行间距
line-height用于设置行间的距离(行高),可以控制文字行与行之间的距离
上间距、下间距、文本高度
css的三种样式表
内部样式表
行内样式表
外部样式表
复合选择器
后代选择器(重要)
元素1和元素2 中间用空格隔开
元素1是父级,元素2是子级,最终选择的是元素2
元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可
子选择器(重要)
元素2必须是亲儿子,其孙子、重孙之类都不归他管,你也可以叫他亲儿子选择器
并集选择器
伪类选择器
链接伪类选择器
用冒号(:)表示
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接(鼠标按下未弹起的链接)
focus伪类选择器
元素显示模式
元素显示模式就是元素(标签)以什么方式进行显示,比如div自己占一行,比如一行可以放多个span
HTML元素一般分为块元素和行内元素两种类型
块元素
h1~h6、p、div、ul、ol、li
特点:
1.比较霸道,自己独占一行
2.高度,宽度,外边距以及内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
4.是一个容器及盒子,里面可以放行内或者块级元素
行内元素
span、a
特点:
1.相邻行内元素在一行上,一行可以显示多个
2.高、宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素
行内块元素
img、
同时具有块元素和行内元素的特点
1.和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)
2.默认宽度就是它本身内容的宽度(行内元素特点)
3.高度,行高,外边距以及内边距都可以控制(块级元素特点)
简单小米侧边栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">监控 儿童</a>
<a href="#">耳机 音响</a>
</body>
<style>
a {
width: 230px;
height: 40px;
display: block;
color: #fff;
background-color: rgb(159, 157, 157);
text-decoration: none;
font-size: 14px;
line-height: 40px;
padding-left: 15px;
}
a:hover {
background-color: rgb(255, 111, 0);
}
</style>
</html>
单行文字垂直居中的原理
行高的上空隙和下空隙把文字挤到中间了,如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下
CSS的背景
背景图片
background-image:url()
背景平铺
background-repeat:no-repeat
背景图片位置
background-position:x y
1.参数是方位名词
- 如果指定的两个值都是方位名词,则两个值前后顺序无关
- 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
2.参数是精确单位 - 如果参数值是精确坐标,那么第一个肯定是x坐标,第二个肯定是y坐标
- 如果指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
3.参数时混合单位
背景图像固定(背景附着)
background-attachment
scroll 背景图是随对象内容滚动
fixed 背景图像固定
简写属性
一般习惯约定顺序为:
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
背景色半透明
background:rgba(0,0,0,.3)
CSS的三大特性
层叠性、继承性、优先级
行高的继承性
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高,则会继承父元素的行高为1.5
- 此时子元素的行高是:当前子元素的文字大小*1.5
- body行高1.5 这样写法最大的优势就是里面元素可以根据自己文字大小调整行高
选择器的权值
!important
行内样式style=" "
ID选择器
类选择器,伪类选择器
元素选择器
继承或者*
所以以后我们看标签到底执行哪个样式,就先看这个标签有没有直接被选出来
继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0
权重的叠加
盒子模型
border边框
content内容
padding内边距
margin外边距
border
boder-width
border-style
solid实线
dashed虚线
dotted点线
border-color
border-collapse
合并边框
padding
1个值:上下左右
2个值:上下&左右
3个值:上&左右&下
4个值:上&右&下&左
新浪导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">绿洲秀</a>
</div>
</body>
<style>
.nav {
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
.nav a {
display: inline-block;
height: 41px;
line-height: 41px;
text-align: center;
text-decoration: none;
color: #4c4c4c;
padding: 0 20px;
background-color: #fcfcfc;
}
.nav a:hover {
color: #ff8500;
background-color: #edeef0;
}
</style>
</html>
margin
外边距可以让块级盒子水平居中,但是必须满足两个条件
1.盒子必须指定了宽度(width)
2.盒子左右的外边距都设置为auto
margin:0 auto
嵌套块元素垂直外边距的塌陷
解决方案:
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加overflow:hidden