Web前端基础(2)CSS基础知识

CSS基础知识

一个HTML文档可以显示不同的样式, CSS 指层叠样式表 (Cascading Style Sheets)

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

css样式语法结构

CSS声明总是以分号(;)结束,声明组以大括号({})括起来。

样式分类

插入样式表的方法有三种:

  • 外部样式表(External style sheet)
    1
    2
    3
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

浏览器会从文件 mystyle.css 中读到样式声明

  • 内部样式表(Internal style sheet)
    当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表

    1
    2
    3
    4
    5
    6
    7
    <head>
    <style>
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
    </style>
    </head>
  • 内联样式(Inline style)
    内联样式不建议使用

    1
    <p style="color:sienna;margin-left:20px">这是一个段落。</p>

一些常见属性

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
.testcolor{
color:red;
/*这是个注释*/
}
<style type="text/css">

<span class="testcolor">测试字符颜色</span>

/*注意css和html的注释**/
  • 字符颜色 color:red;

  • 字号大小 font-size:40px;

  • 背景颜色 background-color:blue;

  • 加粗 font-weight:bold;

  • 不加粗 font-weight:normal;

  • 斜体 font-style:italic;

  • 不斜体 font-style:normal;

  • 下划线 text-decoration:underline;

  • 没有下划线 text-decoration:normal;

基础选择器

标签选择器

div{ }

id选择器

#id{ }

类选择器

.classname{ }
同一个标签可能同时属于多个类,用空格隔开

1
<h3 class="teshu  zhongyao">我是一个h3啊</h3>

还有一个常有思路写出所有公共类供全局使用

  1. 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。
  2. 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。
  3. 要尽可能的使用class,外部框体和特殊地方才用id选择器

后迭代选择器

向后迭代,不只是儿子,孙子,子子孙孙都可以

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
.div1 p{
color:red;
}
</style>

<div>
<p>测试文本1<p>
</div>
<div class="div1">
<p>测试文本2<p>
</div>

测试文本1




测试文本2


上面只会对文本2有效果

交集选择器

一般是以标签选择器开头,class选择器结尾

1
2
3
h3.special{
color:red;
}

并集选择器

用逗号分隔

1
2
3
h3,li{
color:red;
}

通配符

通配符* :效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。

1
2
3
*{
color:red;
}

CSS的继承性和层叠性

继承性

有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。

哪些属性能继承?

color、 text-开头的、line-开头的、font-开头的

所以,如果我们的页面的文字,都是灰色,都是14px。那么就可以利用继承性:

1
2
3
4
body{
color:gray;
font-size:14px;
}

层叠性

层叠性原则:

  1. 先看有没有选中,如果选中了,那么以(id数,类数,标签数)来计权重。谁大听谁的。如果都一样,听后写的为准。
  2. 如果没有选中,那么权重是0。如果大家都是0,就近原则

如果同一个标签,携带了多个类名,有冲突怎么显示?

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
.spec2{
color:blue;
}
.spec1{
color:red;
}
</style>

<p class="spec1 spec2">我是什么颜色?</p>
<p class="spec2 spec1">我是什么颜色?</p>

我是什么颜色?


我是什么颜色?

可以看到都是红色,所以和在标签中的挂类名的书序无关,只和css的顺序有关

!important标记

当在一个样式声明中使用一个!important 规则时,此声明将覆盖任何其他声明。

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
p{
color:red !important;
}
#para1{
color:blue;
}
.spec{
color:green;
}
</style>

使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。

盒模型

一个盒子中主要的属性就5个:width、height、padding、border、margin。

1
2
3
4
5
6
7
8
9
<style type="text/css">
div.t1{
width:200px;
height:200px;
border:1px solid red;
padding: 50px;
}
</style>
<div class="t1">测试文本</div>
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本

这个盒子width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。

chrome浏览器盒子模型

宽度和真实占有宽度,不是一个概念!!
真实占有宽度= 左border + 左padding + width + 右padding + 右border

padding分方向设置

1
padding:30px 20px 40px 100px;  /*(上、右、下、左)*/

用小属性层叠大属性

1
2
padding: 20px;
padding-left: 30px;

chrome浏览器盒子模型

下面的写法错误

1
2
padding-left: 30px;
padding: 20px;

border的其他属性解释

  • border-width:10px; → 边框宽度
  • border-style:solid; → 线型
  • border-color:red; → 颜色。
1
border:10px solid red;

标准文档流现象

我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个“流”,必须从上而下,像“织毛衣”。

标准文档流的几个特点和现象:

  1. 空白折叠现象
    HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。

  2. 高矮不齐,底边对齐

高矮不齐底边对齐演示

  1. 自动换行,一行写不满,换行写。

块级元素和行内元素

在HTML中,我们已经将标签分过类,当时分为了:文本级、容器级。

文本级: p、span、a、b、i、u、em
容器级: div、h系列、li、dt、d

所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素。
所有的容器级标签都是块级元素。

块级元素和行内元素的相互转换: display:inline; display:block;

块级元素

  • 霸占一行,不能与其他任何元素并列
  • 能接受宽、高
  • 如果不设置宽度,那么宽度将默认变为父亲的100%。

行内元素

  • 与其他行内元素并排
  • 不能设置宽、高。默认的宽度,就是文字的宽度。

脱离标准流

标准流里面限制非常多,标签的性质恶心。比如,我们现在就要并排、并且就要设置宽高。所以,移民!脱离标准流!

css中一共有三种手段,使一个元素脱离标准文档流:浮动、绝对定位、固定定位。

浮动

一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

实现浮动

浮动分为左浮动和右浮动

1
2
3
4
5
6
img{
float:left;
}
img{
float:right;
}

浮动的特点

  1. 浮动的元素脱离标准流。(能够并排了,并且能够设置宽高了。无论它原来是个div还是个span)。
  2. 浮动的元素互相靠帖。
  3. 浮动的元素有“字围”效果。

字围效果示例

浮动的清除

有时候我们需要清除行内元素浮动的特性以适应某种要求。

浮动效果

例如上面的文本如果我们清除其浮动效果则图片会规则排列成两行

1
2
3
4
.text_line
{
clear:both;
}

浮动清除效果

清除浮动的方法

例如:现在有两个div,div身上没有任何属性。每个div中都有li,这些li都是浮动的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style text="text/css">
ul{
float:left;
margin:0px;
padding:0px;
}
ul li{
color:white;
float:left;
background-color:#FF923D;
}
</style>

<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>

<div>
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>

  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧

1. 给浮动的元素的祖先元素添加高度

给浮动的元素的祖先元素添加高度

可以看到div的高度是0px, 因为div内的元素是浮动的,所以div不能被撑出高度。

1
2
3
4
5
<style text="text/css">
div{
height:40px;
}
</style>

  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧

网页制作中,高度height很少出现。为什么?因为能被内容撑高!工作中用的很少。

2. clear:both;

这种方法有一个非常大的、致命的问题,margin失效了。

3. 隔墙法
这种方法可以在两个div中间添加一个块元素,和上面图片的例子很相似。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style text="text/css">
...

#heightdiv{
clear:both;
height:10px;
}
</style>

<div>
<ul>
...
</ul>
</div>
/*隔墙*/
<div id="heightdiv" ></div>
<div>
<ul>
...
</ul>
</div>

  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧

4. 内墙法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style text="text/css">
...

.heightdiv{
height:40px;
}
</style>

<div>
<ul>
...
</ul>
/*内墙*/
<div class="heightdiv" ></div>
</div>
<div>
<ul>
...
</ul>
/*内墙*/
<div class="heightdiv" ></div>
</div>

  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧

5. overflow:hidden;

overflow就是”溢出”的意思, hidden就是”隐藏”的意思。表示”溢出隐藏”。所有溢出边框的内容,都要隐藏掉。

块标签元素溢出现象

本意就是清除溢出到盒子外面的文字。但是,前端开发工程师又发现了,它能做偏方。

一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了。这是一个偏方。

例如上面给两个div加上overflow:hidde;

1
2
3
4
5
<style text="text/css">
div{
overflow:hidden;
}
</style>

  • HTML
  • CSS
  • JS
  • HTML5
  • 设计模式
  • 学习方法
  • 英语水平
  • 面试技巧

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome Class ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Error Exception Extensions File FileProvider Flow Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Style Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Vue.js Web Web前端 Workbench api apk bookmark by关键字 cli compileOnly computed css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge methods mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode watch webpack 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指令 指针 插件 插值 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 渲染 源码 源码分析 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 绑定 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 脚手架 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×