CSS入门

作者: 烫成黄毛 | 来源:发表于2018-12-20 14:23 被阅读22次

层叠样式表(Cascading Style Sheets,缩写为 CSS),是一种 样式表语言,用来描述 HTMLXML(包括如 SVGMathMLXHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

学习资源

  1. 张鑫旭CSS240篇博客
  2. Google:阮一峰CSS
  3. Codrops CSS的炫酷效果
  4. Google:关键词+MDN
  5. CSS 2.1 中文spec

CSS的四种引入方式

  1. 内联 style 属性(在标签中加入style属性)
  2. style标签(一般写在<head>里面)
<head>
    <style>
      body{
        background-color: grey
      }
  </style>
</head>
  1. 用<link>的形式引入css
<link rel="stylesheet" herf="./a.css">
  1. 一般写在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

知识点

  1. <div>是块级(block)元素,单独占一行,如果想把多个<div>放在一行,有两种方法。
  • 每个<div>加个float属性,然后父级元素加个clearfix(见上文)
  • 使用display: inline-block(最好不要用,可能会出bug)
  1. 块级元素的高度是由它内部文档流元素的总和决定的。(不一定相等)
    内联元素的高度跟具体的字体以及与字体相关的设计师设计的参数有关>

    内联元素的高度(下面的是121px)
    同样的font-size但是<span>却不同,这是因为上面字体的建议行高就是字体大小的1.4倍,下面的是1.21倍。line-height可以限制<span>的高度。
  2. 文档流:内联元素从左往右流动;块级元素从上往下流动,每个块级元素另起一行。

  3. 如果内联元素是一个很长的英文,这个单词是不会分开的,除非你用word-break

  4. <span>(内联元素)是不接受设置宽高的,但是可以加上一个display: inline-block来设置宽高。更好的方法是给<span>加上padding.

相关文章

  • #30天专注橙长计划#向前端工程师进发#day0#航线设计

    发现问题,路线大修。 学习方面:暂定按HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门...

  • 前端入门系列

    前端HTML & CSS 基础入门(1)初识 前端HTML & CSS 基础入门(2)段落及文本 前端HTML &...

  • 前端开发 之 CSS入门

    文章简要:CSS介绍DIV+CSS的优点CSS 语法CSS新建格式 CSS入门 CSS介绍 CSS(Cascadi...

  • CSS第一小节第一天

    CSS基础入门 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) CSS通常...

  • mdui quickstart 快速入门

    实现入门效果 目录结构 代码 说明 这个框架依赖很少,入门实例 css 加入 mdui.css javascrip...

  • CSS Syntax(CSS 语法)

    简单介绍CSS,学习入门自用=-= 以下笔记摘抄全部来自优达学城,感谢优达让我入门。 什么是CSS CSS即层叠样...

  • 前段书籍

    《CSS网站布局实录》——国产CSS2入门书,有些技巧已经淘汰,但仍不失为最好的CSS入门教程。 《无懈可击的We...

  • CSS初探

    Head First HTML与CSS 第七章 CSS入门 CSS——掌控页面的表现 CSS结构简介 CSS包含一...

  • 2019-04-29

    基于CSS入门基础必备 CSS选择器的使用 CSS制作照片墙 效果显示:

  • CSS_基础

    初探css,了解个大概,本文主要是对"zhaolion:CSS入门笔记 - 初识CSS"的简要记录 CSS的好处 ...

网友评论

    本文标题:CSS入门

    本文链接:https://www.haomeiwen.com/subject/hfjhhqtx.html