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. Less常用功能使用

    Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充.Less 可以运行在 Node 或浏览器端. L ...

  2. Exception in thread &amp;quot;main&amp;quot; java.lang.ArrayIndexOutOfBoundsException: 1

    场景:eclipse中编写java中用到数组 问题: 程序不报错但是运行过程中 终止,显示字样 " Exception in thread "main" java.lan ...

  3. 【LeetCode链表#9】图解:两两交换链表节点

    两两交换链表中的节点 力扣题目链接(opens new window) 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 思路 ...

  4. GraalVM和Spring Native尝鲜,一步步让Springboot启动飞起来,66ms完成启动

    简介 GraalVM是高性能的JDK,支持Java/Python/JavaScript等语言.它可以让Java变成二进制文件来执行,让程序在任何地方运行更快.这或许是Java与Go的一场战争? 下载安 ...

  5. Windows离线安装.net Framework3.5

    写在前面 本文主要介绍在Windows离线情况下安装.NETFramework3.5运行环境 使用场景 在日常开发C#程序中,经常会遇到开发过程中无任何问题,但是安装到目标电脑是会无法打开的,如下图 ...

  6. saas架构之druid解析表名

    public void preHandle(BoundSql boundSql, RequestEntity requestEntity) { System.out.println("要执行 ...

  7. 不用Blazor WebAssembly,开发在浏览器端编译和运行C#代码的网站

    本文中,我将会为大家分享一个如何用.NET技术开发"在浏览器端编译和运行C#代码的工具",核心的技术就是用C#编写不依赖于Blazor框架的WebAssembly以及Roslyn技 ...

  8. JAVA虚拟机-01-JAVA虚拟机家族简介

    JAVA虚拟机家族简介 Classic VM JDK1.0发布,第一款商议的JAVA虚拟机.纯解释器方式来执行java代码的的JAVA虚拟机.如果要使用即时编译就需要外挂编译器.如果外挂了编译器,及时 ...

  9. Snipaste下载安装(使用教程)

    ## Snipaste下载安装(使用教程)**一 简单介绍** Snipaste 是一个免费简单但强大的截图工具,也可以让你将截图贴回到屏幕上!下载并打开 Snipaste,按下 F1 来开始截图,再 ...

  10. JDK、tomcat、MySQL5.7安装教程

    JDK自定义安装 一.安装JDK.JRE 1.在E盘下建立一个java文件夹,在java文件夹下分别建立jdk和jre文件夹 2.双击安装包 3.点击下一步,更改安装路径,安装到第一步创建好的jdk文 ...