CSS 基础
CSS 基础
Emmet 语法
使用缩写来提高 html/css 的编写速度
快速生成 HTML 结构的语法
- 输入标签: 直接输入标签名, 再按 tab
- 生成多个相同的标签: 标签名 * 个数, 再按 tab
- 父子级标签, 用 , 例: ulli
- 兄弟关系的标签, 用 +, 例: div+p
- 如果生成带有类名或者id名字的, 用 .demo 或者 #demo
- 如果生成div类名是有顺序的, 用自增符号 $, 例: div.demo$*5
- 在生成的标签内部些内容可以用{}表示, 例:div.demo{$}*10
快速生成 CSS
直接按缩写就行, 如 text-align: center; 可以直接用 tac 输入
CSS 复合选择器
- 复合选择器可以更加准确, 更加高效的选择目标元素
- 复合选择器是由两个或者多个基础选择器通过不同方式组合成的
后代选择器
又叫包含选择器, 可以选择父元素里面的子孙元素.
语法: 元素1 元素2.....元素 n {样式声明}
- 每一个元素可以是任意的基础选择器
.nav li{
color: rgb(255,0, 0);
}
ul li a{
text-decoration: none;
color: aqua;
}
子选择器
只选择某元素的所有直接子元素
语法:
元素1元素2.....元素 n {样式声明}
并集选择器
语法:
元素1, 元素2, ...,元素 n {样式声明}
同时选择多组标签, 为他们指定相同的样式
伪类选择题
向某些选择器添加特殊效果, 比如给链接添加特殊效果, 或者选择第n 个元素
用 : 表示
链接伪类选择器
a: link /*x选择所有未被访问过的链接*/
a: visited /*选择所有已经被访问过的链接*/
a: hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
注意要按上面顺序写, 实际开发不一定全部都用上
:focus 伪类选择器
选取焦点所在的表单元素
语法:
input: focus {样式声明}
例子:
input:focus {
background-color: pink;
color:red;
}
CSS 的元素显示模式
什么是元素显示模式
元素(标签)以什么方式进行显示, HTML 元素一般分为行元素和块元素
块元素
特点:
- 独占一行
- 高度, 宽度, 外边距, 内边距都可以控制
- 宽度默认是容器(父级)宽度的 100%
- 是一个容器(盒子), 内部可以防止行内或者块级元素
注意:
- 文字类元素内部不能使用块级元素, 如p 和 h1~h6 等内部不能放其他块级元素
行内元素
特点:
- 相邻行内元素在一行上可以显示多个
- 直接设置宽高无效
- 默认宽度是
- 行内元素内只能容纳行内元素或者文本
注意:
- 链接内部不能再放链接
- 特殊情况a内可以放块级元素, 最好转换成块级模式
行内块元素
如 img/,input/,td
特点:
- 和相邻行内元素在一行上, 但是直接会有空隙, 一行可以显示多个
- 默认宽度是内容的宽度
- 宽高,内外边距都可以控制
元素模式的转换
一种模式的元素需要另一种模式的特性
如需要增加链接 a 的触发范围
语法:
display: inline | block | inline-block
手机 电话卡
电视 盒子
笔记本 显示器
家电 插线板
出行 穿戴
智能 路由器
电源 配件
健康 儿童
耳机 音箱
生活 箱包
CSS 基础 相关文章
- Java基础（2）——java流程控制
Java流程控制 1.用户交互Scanner Scanner对象 java.util.Scanner（工具包） 是Java5 的新特征，我们可以通过Scanner 类来获取用户的输入。 基本语法 Scanner s = new Scanner(System.in); 通过Scanner 类的next（）与nextLine（）方法获取输入的字符串，在读
- Java基础之（七）：Scanner对象
用户交互Scanner Scanner对象 java.util.Scanner 可以通过Scanner类来获取用户的输入 基本语法： Scanner scanner = new Scanner(System.in); 通过Scanner类的next()与nextLine()方法获取输入的字符串，在读取前我们一般需要使用hasNext()与hasNextLine()判
- SCSS 的基本使用
现在最常用的 CSS 处理器有 Less，Sass。本人比较常用Sass，选择什么看自己，主要数为了提高开发效率。今天就将一些基本用法在这里分享给大家，有不足的希望在评论区里补充哦~ 首先，用一句话说明 Sass、Scss的关系： Sass就是css的预处理器，Scss是Sass3版
- Java 基础(面向对象特征之三：多态性)
多态性，是面向对象中最重要的概念，在 JAVA 中的体现： 对象的多态性： 父类的引用指向子类的对象 可以直接应用在抽象类和接口上 Java 引用变量有两个类型：编译时类型 和 运行时类型。编译时类型由声明该变量时使用的类型决定，运行时类型由实际赋给该变量
- numpy基础之数据类型
数据类型 常见数据类型 Python 原生的数据类型相对较少， bool、int、float、str等。这在不需要关心数据在计算机中表示的所有方式的应用中是方便的。然而，对于科学计算，通常需要更多的控制。为了加以区分 numpy 在这些类型名称末尾都加了“_”。 下表列举
- sass
sass 是一个css的扩展语言，换编程的方式去编写css代码sass的文件后缀有两种：1.scss 2.sasssass后缀的文件，写代码的时候，是没有大括号的，所有嵌套关系全部依赖空格换行sass文件不能直接被浏览器识别，需要将sass文件转成css文件才能被html文件引入使用，
- Java基础之（六）：变量、运算符与JavaDoc
变量、常量 变量作用域 类变量 实例变量 局部变量 public class Variable{ static int allClicks=0;//类变量 String str="hello wordl";//实例变量 public void method(){ int i=0;局部变量 }} 源码： //类变量 static static double salary = 2500; //属性
- spark基础（1）
将相同国家进行分组，然后将count相加sum(count)， 对sum(count)进行排序，输出top5 val path="/Volumes/Data/BigData_code/data/flight-data/csv/2015-summary.csv" val data = spark.read.option("inferSchema", "true").option("header", "true").csv(pat
- css常用单位与选择器
5个常用单位 px ，和当前操作系统视窗分辨率有关 em ，和父级元素的字体大小有关，即父级元素的字体大小的x倍的意思，如果父级元素没有设置，一直找到html顶级元素为止 rem ，是html字体大小的倍数，与父级元素无关 vh/vw ，和浏览器当前尺寸有关，即浏览器
- java设计模式基础--拦截器
由于动态代理一般比较难理解，一般都会设计一个拦截器接口供开发者使用，这样开发者就只用知道拦截器接口的方法，含义和作用即可，无须知道动态代理是怎么实现的。 以下代码用JDK动态代理来实现一个拦截器的逻辑。 一，定义拦截器接口： package intercept;i