CSS入门
2018-12-20 本文已影响22人
烫成黄毛
层叠样式表(Cascading Style Sheets，缩写为 CSS），是一种 样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
学习资源
- 张鑫旭CSS240篇博客
- Google:阮一峰CSS
- Codrops CSS的炫酷效果
- Google:关键词+MDN
- CSS 2.1 中文spec
CSS的四种引入方式
- 内联 style 属性（在标签中加入style属性）
- style标签（一般写在<head>里面）
<head>
<style>
body{
background-color: grey
}
</style>
</head>
- 用<link>的形式引入css
<link rel="stylesheet" herf="./a.css">
- 一般写在a.css的第一行，引入a.css之前引入b.css
@import url (./b.css);
将<li>实现浮动
加一个float属性
<li style="float: left;">
但是与此同时一定会出现一个bug（下面的内容会跑上来）
在<ul>中加入
-
class="clearfix"可以解决这个bug（clearfix写在CSS里面，内容如下。不要加到float上，要加到他们的爸爸上）
.clearfix::after{
content: '';
display: block;
clear: both;
}
ps: 其中clearfix是属性值
-
style="list-style: none"可以把列表的小圆点消失 -
margin: 0; padding: 0可以把列表的空白去除
在CSS里面批量添加样式
.topNavBar>nav>ui{
list-style: none; margin: 0; padding: 0;
}
ps: 1. 必须要完整地满足topNavBar>nav>ui严格的父子关系，多一层都不行
2. topNavBar也是属性值
3. 添加的是ui下面的样式
body{
background: black;
}
提到的一个考点
开发者工具
Styles:展示所有的样式
Computed:展示计算出来的样式
页面上的默认字体大小是多少:16px
知识点
-
<div>是块级(block)元素，单独占一行，如果想把多个<div>放在一行，有两种方法。
- 每个
<div>加个float属性，然后父级元素加个clearfix(见上文) - 使用
display: inline-block(最好不要用，可能会出bug)
-
块级元素的高度是由它内部文档流元素的总和决定的。（不一定相等）
内联元素的高度跟具体的字体以及与字体相关的设计师设计的参数有关>
内联元素的高度（下面的是121px）
同样的font-size但是<span>却不同，这是因为上面字体的建议行高就是字体大小的1.4倍，下面的是1.21倍。line-height可以限制<span>的高度。 -
文档流:内联元素从左往右流动；块级元素从上往下流动，每个块级元素另起一行。 -
如果内联元素是一个很长的英文，这个单词是不会分开的，除非你用
word-break。 -
<span>（内联元素）是不接受设置宽高的，但是可以加上一个display: inline-block来设置宽高。更好的方法是给<span>加上padding.
