1、emment语法(作用:提升html和css书写速度)

2、 复合选择器

  1)由两个或多个基础选择器,通过不同的方式组合而成的,可以更准确、更高效的选择目标元素(标签)

  2)后代选择器、子元素选择器、并集选择器

重点

3、后代选择器

  1)又叫包含选择器,可以选择父元素里面的子元素(儿子或孙子)

  2)格式: 元素1 元素2 { xxx }

// div 内部的所有p标签,文字颜色都会变成红色
div p {
color: red;
}

4、子元素选择器

  1)也叫子选择器,只能选择父元素的下一级元素(儿子元素)

  2)格式: 元素1>元素2 { xxx }

    

// div下一级p标签,文字颜色变成红色
div>p {
color: red;
}

5、 并集选择器

  1)并集选择器可以选择多组标签, 同时为他们定义相同的样式。

  2)写法元素1,元素2 { 样式声明 }  。

  

//div标签和p标签
//两类标签都文字颜色都变成红色
div, p {
color: red;
}

6、链接伪类选择器

  1)伪类选择器用于向某些选择器添加特殊的效果。

  2)格式: 用冒号(:)表示。
  3)书写过程中,顺序不可更改。 link -> visited -> hover -> active

  

7、focus伪类选择器

  1):focus 伪类选择器用于选取获得焦点的表单元素

  2)input标签获取焦点后,会执行内部书写的css样式

8、复合选择器总结

  

9、元素显示模式
  1)HTML元素一般分为块元素和行内元素两个类型。

  2)块元素:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>。

    a、独占一行、宽度默认容器的100%、相当于一个容器

    b、<p>、<h1>~<h6>主要存放文字,里面一般不放块级元素,尤其是<div>

  3)行内元素(内联元素):<a>、<strong>、<b>、<i>、等文字样式标签 <span>
    a、行内元素可在一行上显示,宽和高由内容的决定、不可直接设置,行内元素只能放文本和其他行内元素
    b、<a>转换为块元素后,内部可放块元素

  4)行内块元素(部分资料的叫法特殊)<img>、<a>、<td>

    a、同时具有块元素和行内元素的特点

    b、相邻的行内(行内块)元素在一行上、默认宽度是内容宽度(行内特点),宽高等可以设置(块特点)

  5)总结

  

10、元素显示模式转换***

  1)display样式(显示)。block(块)、inline(行内)、inline-block(行内块)

vue学习 第三天css基础的更多相关文章

  1. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  2. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  3. vue学习【三】vue-router路由显示多页面

    大家好,我是一叶,今天是七夕,单身狗的我还在这里写踩坑文.在这里还是要祝大家早日脱单(能不能脱单自己心里没个数吗).本篇继续踩坑,在单页面上展示多页的内容,大家的想法是什么,估计大家第一印象会是ifr ...

  4. vue学习-第三个DEMO(计算属性和监视) v-model基础用法

    <div id="demo"> 姓:<input type="text" placeholder="First Name" ...

  5. web前端学习(三)css学习笔记部分(1)-- css入门基础知识+基本样式

    1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...

  6. Vue学习系列(三)——基本指令

    前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...

  7. 2017年学习的三个CSS新特性

    这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...

  8. Struts2框架学习第三章——Struts2基础

    本章要点 —  Struts 1框架的基本知识 — 使用Struts 1框架开发Web应用 —  WebWork框架的基本知识 — 使用WebWork框架开发Web应用 — 在Eclipse中整合To ...

  9. vue学习第三天 ------ 临时笔记

    说明:之前两天属于入门,文章可能存在片段信息 vue2.x+webpack快速搭建前端项目框架详解 http://www.jb51.net/article/129463.htmVue cli + We ...

  10. web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

随机推荐

  1. 递归实现指数型枚举 (n个可选可不选)

    递归实现指数型枚举 从 1∼n 这 n 个整数中随机选取任意多个,输出所有可能的选择方案. 输入格式 输入一个整数 n. 输出格式 每行输出一种方案. 同一行内的数必须升序排列,相邻两个数用恰好 1 ...

  2. Swagger的基本使用

    Swagger简介和使用 使用Swagger你只需要按照它的规范去定义接口及接口相关的信息,再通过Swagger衍生出来的一系列项目和工具,就可以做到生成各种格式的接口文档,以及在线接口调试页面等等. ...

  3. Array list练习

    Array list练习 数据添加到集合 生成6个1~33之间的随机整数,添加到集合,并遍历 public class Test01ArrayList { public static void mai ...

  4. MyBatis的使用三(在sql语句中传值)

    本文主要介绍在mybatis中如何在sql语句中传递参数 一. #{ } 和 ${ } 1. #{ } 和 ${ }的区别 #{ }是预编译处理 ==> PreparedStatement ${ ...

  5. python装饰器拦截方法执行

    import time def log(delay=0): def decorator(func): def wrapper(*args, **kwargs): """我 ...

  6. day05-SpringMVC底层机制简单实现-01

    SpringMVC底层机制简单实现-01 主要完成:核心分发控制器+Controller和Service注入容器+对象自动装配+控制器方法获取参数+视图解析+返回JSON格式数据 1.搭建开发环境 创 ...

  7. 可能是最简单的本地GPT3 对话机器人,支持OpenAI 和 Azure OpenAI

    毫无疑问,GPT是目前最火的人工智能方向,已经商用的有OpenAI公司原生的GPT3 和 ChatGPT ,以及微软公司的Azure OpenAI Service (暂时还没有包含ChatGPT).关 ...

  8. 普冉PY32系列(四) PY32F002/003/030的时钟设置

    目录 普冉PY32系列(一) PY32F0系列32位Cortex M0+ MCU简介 普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境 普冉PY32系列(三) P ...

  9. Altium Designer v23.0.1.38图文详解

    Altium Designer (AD)  最新安装河蟹教程 ,ltium designer  显著地提高了用户体验和效率,利用时尚界面使设计流程流线化,同时实现了前所未有的性能优化.使用64位体系结 ...

  10. vue 事件中央总线

    vue 事件中央总线 作用: 实现任意组件间的通信 实现的方法: 有以下两种方式 方式1: 全局事件总线 1.在main.js文件中定义 new Vue({ el: '#app', router, s ...