CSS 学习笔记 day02 2021-3-31

最新推荐文章于 2024-06-21 15:26:11 发布

ZivChen971206

最新推荐文章于 2024-06-21 15:26:11 发布

阅读量168

点赞数

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/weixin_44390531/article/details/115361806

版权

前端基础专栏收录该内容

47 篇文章 0 订阅

订阅专栏

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-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

ZivChen971206

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 学习笔记 day02 2021-3-31

CSS 学习笔记 day02Cascading Style Sheets 层叠样式表Web前端开发规范手册命名规则：头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：me
复制链接

扫一扫