一、CSS简介

 1.HTML局限性

  • 只关注内容的语义。
  • “丑”

2.CSS-网页的美容师

  • CSS是层叠样式表的简称，也称为CSS样式表或级联样式表。
  • 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽度、边框样式、边距等）以及版面的布局和外观显示样式。
  • 美化HTML。
  1. HTML主要做结构，显示元素内容。
  2. CSS美化HTML，布局页面。
  3. CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。

3.CSS语法规范

  • CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
  • <style>
    
        p {
    
            color:red;
    
            font-size: 12px;
    
        }
    
 </style>

<body>
    
    <p>有点意思</p>
    
</body>

 4.CSS代码风格

  • 以下代码书写风格符合实际开发
  1. 样式格式书写：紧凑风格和展开风格，推荐展开风格。
  2. 样式大小写：提倡小写字母。
  3. 空格规范：属性值前冒号后，保留一个空格；选择器（标签）和大括号之间保留一个空格。

二、CSS基础选择器

1.CSS选择器的作用

  • 选择标签用的。
  • 分为基础选择器和复合选择器。
  1. 标签选择器
  2. 类选择器（最常用）
  3. 类选择器-多类名
  4. id选择器
  5. 通配符选择器

三、CSS字体属性

  • 使用font-family属性定义字体。
  • 使用font-size属性定义字体大小。（谷歌浏览器一般默认16px）
  • 使用font-weight属性定义字体粗细。
  • 使用font-style属性定义文字样式。（italic/normal）
  • 复合属性 font: font-style font-weight font-size font-family（ 必须保持这个顺序，不设置的属性可省略，size和family属性必须有）

四、文本属性

  • 文本的外观
  1. 文本颜色（颜色值、十六进制、RGB，十六进制最常用）
  2. 对齐文本text-align属性
  3. 装饰文本text-decoration属性（可以给文本添加常用下划线underline、不常用删除线line-through、几乎不用上划线overline、最常用默认none）
  4. 文本缩进text-indent属性（text-indent: 20px;　　text-indent: 2em;）
  5. 行间距line-height属性（line-height: 26px;）(PastStone Capture软件测量)

五、CSS引入方式

  • CSS的三种样式表：按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类。

1.行内样式表（行内式）

  • 在元素标签内部的style属性中设定CSS样式（<p style="color: red";> </p>）
  • 控制当前的标签样式设置。

2.内部样式表（嵌入式）

  • 写到HTML页面内部，是将所有CSS代码抽取出来，单独放到一个<style>标签中。理论上<style>标签可以放在html文档的任何地方，但一般放在<head>标签中。
  • 方便控制当前整个页面的元素样式设置。
  • 代码结构非常清晰，但并没有实现结构与样式完全分离。

3.外部样式表（链接式）

  • 实际开发中使用，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
  • 两步：1.新建一个后缀为.css的样式文件，把所有CSS代码都放入此文件。2.在HTML页面中，使用<link>标签引入这个文件。
  • <link rel="stylesheet" href="css文件路径">　

六、Emment语法

  • 来提高HTML/CSS编写速度，Vscode内部已经集成该语法。
  • 快速生成HTML结构语法
  1. 生成标签，直接输入标签名按tab键即可。
  2. 若想生成多个标签，加上*即可，div*5。
  3. 父子级关系ui>li。
  4. 兄弟级关系div+p。
  5. .nav按tab键生成class="nav";#nav生成id="nav";默认生成div标签。其他的可p.nav。
  6. 自增符号$，生成有顺序的加上$即可，.demo$*5。
  7. 标签里面显示文字用{}即可，div{直接写内容}。
  • 快速生成CSS样式语法
  1. 比如w200 按tab键 可以生成width: 200px。
  2. 比如lh26px 按tab键 可以生成line-height: 26px。
  3. 格式化代码。

18号CSS学习的更多相关文章

  1. 6号css学习小记

    一.overfloat属性:(四个值) visible :默认值.内容不会被修剪,会呈现在元素匡之外. hidden:内容会被修剪,并且其余内容是不可见的. scroll :内容会被修剪,但是浏览器会 ...

  2. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  3. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  4. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  5. CSS学习（一）

    /*</br> * color</br> * background-color background-image background-repeat background-po ...

  6. CSS学习之float解析

    转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或 ...

  7. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  8. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

  9. HTML与CSS学习笔记(1)

    1.web三大核心技术? HTML CSS JavaScript 2.HTML基本机构和属性 HTML:超文本 标记 语言 超文本:文本内容+非文本内容(图片.视频.音频等) 标记:<单词> ...

  10. 47.前端css学习、登陆页面的制作

    CSS: 有了CSS,html中大部分表现样式的标签就可以不用了 html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁 CSS的引入方式: 内联式引入:直接赋予标签styl ...

随机推荐

  1. MQ核心作用异步&削峰&解耦使用场景详解

    说在前面 在如今的高并发互联网应用中,如何确保系统在巨大的流量冲击下还能稳稳当当运转,是每个技术团队都会遇到的挑战.说到这,消息队列(MQ) 就是背后的"大功臣"了. 无论是异步处 ...

  2. php7新内容总结（随时更新）

    一.参数和返回值类型申明 可以申明的有:float,int,bool,string,interfaces,array,callable 一般模式: function sum(int ...$ints) ...

  3. USB协议详解第10讲（USB描述符-报告描述符）

    1.报告描述符的概念和作用 开门见山,报告描述符就是描述报告(HID接口上传输事务中的数据)的一组数据结构. 首先大家可能会问,报告又是什么?我们前面讲过,USB主机一般是以中断的方式向HID设备发送 ...

  4. 2021年1月国产数据库排行榜：OceanBase重回前三，TDSQL增长趋势最强劲！

    墨天轮国产数据库排行榜新年第一期已发布.2021年1月份排行榜前三甲依次为 TiDB .DaMeng.OceanBase .PingCAP TiDB 稳居冠军的宝座,短时间内难以撼动,开源的商业数据库 ...

  5. jenkins Publish over SSH 的配置与使用

    一.安装Publish over SSH 插件 二.在Configure System 配置Publish over SSH属性 Passphrase:如果私钥设置了密码就是私钥的密码,私钥没设置密码 ...

  6. TiDB集群安装维护

    TIDB安装操作文档-https://docs.pingcap.com/zh/tidb/stable/production-deployment-using-tiup 1.环境准备(每台) 1-查看系 ...

  7. 揭秘！KubeSphere 背后的“超级大脑”：etcd 的魅力与力量

    作者:尹珉,KubeSphere Ambassador & Contributor,KubeSphere 社区用户委员会杭州站站长. 1. 开篇:揭开神秘面纱,etcd 如何驱动 KubeSp ...

  8. 痞子衡嵌入式：瑞萨RA系列FSP固件库分析之外设驱动

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是瑞萨RA系列FSP固件库里的外设驱动. 上一篇文章 <瑞萨RA8系列高性能MCU开发初体验>,痞子衡带大家快速体验了一下瑞萨 ...

  9. Effective C++：把C++看作一个语言联邦

    C++曾经是从C with class发展而来的,但是现在随着异常.模板.STL等等的发展,C++已变得相当的多样与庞大,这一方面让C++功能强大无比的多重范式语言,上天入地无所不能:另一方面,也给学 ...

  10. 狂神说-Docker基础-学习笔记-02 Docker常用命令

    狂神说-Docker基础-学习笔记-02 Docker常用命令 1.帮助命令 docker version #查看版本信息 docker info #显示docker的系统信息 docker `命令` ...