CSS回顾(基础知识,元素,选择器,盒子,颜色)
元素分类:
1.行级元素:内联元素 inline
特征:内容决定元素所占位置,不可以通过CSS改变宽高
span strong em a del
2.块级元素:block特征:独占一行,可以通过CSS改变宽高
div p ul li ol form address
3.行级块元素:inline-block
特征:内容决定大小,可以改变宽高
选择器类型(通用的,没写那些伪类):
父子选择器(派生选择器)
<div>
<em></em>
</div>
div em {margin:0px} 有父子关系的几个元素组成的选择器,div下的所有em子孙
直接子元素选择器
div>em { margin:0 } 表示的是div下的直接子元素
并列选择器
<div class='red'></div>
div.red{ color:green } 表示并列关系
权重值比较:<style='color=red' ...>内联样式,1000
id :100 class:10 标签:1 *:0 ,!important是无穷大权重,但是如果!important+1则要更大
分组选择器
.demo{} .red{}
!!解决图片间隔 margin-left:-6px
盒子组成部分:
盒子壁 border
内边距 padding
盒子内容 width+weigth
margin+border+padding+content
颜色:
1.纯英文单词 red,green
2.颜色代码 #00ff22
3.颜色函数 rgb(00,ff ,ff)
rgb()表示光的三原色,red, green ,blue
CSS回顾(基础知识,元素,选择器,盒子,颜色)的更多相关文章
- HTML&CSS基础-伪元素选择器
HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- CSS样式基础知识
CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- weex中css不能使用子元素选择器
weex中css不能使用子元素选择器 刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑
- CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀
CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...
- 前端三件套 HTML+CSS+JS基础知识内容笔记
HTML基础 目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签 文本和超链接标签 标题标签 段落标签 换行标签 水平标签 ...
- css 3d 基础知识
css3d 总结 3d transform (3D变形)(rotate skew scale translate) 基础知识 perspective (视距,景深) perspective-origi ...
- CSS中的伪元素选择器
定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...
- web前端学习(三)css学习笔记部分(1)-- css入门基础知识+基本样式
1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...
- CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
随机推荐
- 1.numpy的用法
numpy创建ndarray对象的三种方法 1.1.list转化 In [8]: import numpy as np In [9]: a = [1,2,3,4] In [10]: x1 = np.a ...
- Java核心技术及面试指南 面向对象部分的面试题总结以及答案
问题2.7.1,开放性问题,说一下你对面向对象思想的了解. 要点1,先说基础概念,比如面向对象思想包括封装.继承.多态,然后说些语法,比如可以通过extends继承类.通过implement来实现接口 ...
- mysql 开发进阶篇系列 22 磁盘I/O问题(从linux操作系统上优化)
1. 使用Symbolic Links分布I/O mysql的数据库名和表名是与文件系统的目录名和文件名对应的,默认情况下,创建的数据库和表都存放在参数datadir定义的目录下.如果不使用RAID或 ...
- sql server 性能调优之 资源等待PAGEIOLATCH
一.概念 在介绍资源等待PAGEIOLATCH之前,先来了解下从实例级别来分析的各种资源等待的dmv视图sys.dm_os_wait_stats.它是返回执行的线程所遇到的所有等待的相关信息,该视图是 ...
- 关于tensorflow conv2d卷积备忘的一点理解
**************input************** [[[[-0.36166722 0.04847232 1.20818889 -0.1794038 -0.53244466] [ ...
- Dockerfile 时区设置
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime RUN echo 'Asia/Shanghai' >/etc/timezo ...
- [机器学习]梯度提升决策树--GBDT
概述 GBDT(Gradient Boosting Decision Tree) 又叫 MART(Multiple Additive Regression Tree),是一种迭代的决策树算法,该算法由 ...
- javascript小实例,实现99乘法表及隔行变色
人生短暂,废话不多说,直奔主题! 这个小实例的要求: 实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开 ...
- Linux--Introduction and Basic commands(Part one)
Welcome to Linux world! Introduction and Basic commands--Part one J.C 2018.3.11 Chapter 1 What Is Li ...
- [转]ASP.NET Core: Static Files cache control using HTTP Headers
本文转自:https://www.ryadel.com/en/asp-net-core-static-files-cache-control-using-http-headers/ Every sea ...