vue学习 第三天css基础
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基础的更多相关文章
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- vue学习【三】vue-router路由显示多页面
大家好,我是一叶,今天是七夕,单身狗的我还在这里写踩坑文.在这里还是要祝大家早日脱单(能不能脱单自己心里没个数吗).本篇继续踩坑,在单页面上展示多页的内容,大家的想法是什么,估计大家第一印象会是ifr ...
- vue学习-第三个DEMO(计算属性和监视) v-model基础用法
<div id="demo"> 姓:<input type="text" placeholder="First Name" ...
- web前端学习(三)css学习笔记部分(1)-- css入门基础知识+基本样式
1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...
- Vue学习系列(三)——基本指令
前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...
- 2017年学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- Struts2框架学习第三章——Struts2基础
本章要点 — Struts 1框架的基本知识 — 使用Struts 1框架开发Web应用 — WebWork框架的基本知识 — 使用WebWork框架开发Web应用 — 在Eclipse中整合To ...
- vue学习第三天 ------ 临时笔记
说明:之前两天属于入门,文章可能存在片段信息 vue2.x+webpack快速搭建前端项目框架详解 http://www.jb51.net/article/129463.htmVue cli + We ...
- web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触
15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...
随机推荐
- Less常用功能使用
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充.Less 可以运行在 Node 或浏览器端. L ...
- Exception in thread &quot;main&quot; java.lang.ArrayIndexOutOfBoundsException: 1
场景:eclipse中编写java中用到数组 问题: 程序不报错但是运行过程中 终止,显示字样 " Exception in thread "main" java.lan ...
- 【LeetCode链表#9】图解:两两交换链表节点
两两交换链表中的节点 力扣题目链接(opens new window) 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 思路 ...
- GraalVM和Spring Native尝鲜,一步步让Springboot启动飞起来,66ms完成启动
简介 GraalVM是高性能的JDK,支持Java/Python/JavaScript等语言.它可以让Java变成二进制文件来执行,让程序在任何地方运行更快.这或许是Java与Go的一场战争? 下载安 ...
- Windows离线安装.net Framework3.5
写在前面 本文主要介绍在Windows离线情况下安装.NETFramework3.5运行环境 使用场景 在日常开发C#程序中,经常会遇到开发过程中无任何问题,但是安装到目标电脑是会无法打开的,如下图 ...
- saas架构之druid解析表名
public void preHandle(BoundSql boundSql, RequestEntity requestEntity) { System.out.println("要执行 ...
- 不用Blazor WebAssembly,开发在浏览器端编译和运行C#代码的网站
本文中,我将会为大家分享一个如何用.NET技术开发"在浏览器端编译和运行C#代码的工具",核心的技术就是用C#编写不依赖于Blazor框架的WebAssembly以及Roslyn技 ...
- JAVA虚拟机-01-JAVA虚拟机家族简介
JAVA虚拟机家族简介 Classic VM JDK1.0发布,第一款商议的JAVA虚拟机.纯解释器方式来执行java代码的的JAVA虚拟机.如果要使用即时编译就需要外挂编译器.如果外挂了编译器,及时 ...
- Snipaste下载安装(使用教程)
## Snipaste下载安装(使用教程)**一 简单介绍** Snipaste 是一个免费简单但强大的截图工具,也可以让你将截图贴回到屏幕上!下载并打开 Snipaste,按下 F1 来开始截图,再 ...
- JDK、tomcat、MySQL5.7安装教程
JDK自定义安装 一.安装JDK.JRE 1.在E盘下建立一个java文件夹,在java文件夹下分别建立jdk和jre文件夹 2.双击安装包 3.点击下一步,更改安装路径,安装到第一步创建好的jdk文 ...