css样式小框架
1.如div{...}会给所有的<div></div>增加样式。
2.名前井号“#”：对应html中的标签的id属性，写法为#name。如#p1{...}会给<p id="p1">ID is p1</p>增加样式。
3.名前小数点“.”：对应html中标签的class属性，写法为.name。如.p2{...}会给<p class="p2">CLASS is p2</p>增加样式。
4.中间空格“ ”：关系到html标签的层次，写法为css css[ css[... css]]，可以设多层。如DIV #p1 .span1{...}
则会给<div><p id="p1"><span class="span1"></span></p></div>中最内部的span1增加样式。
这样写的CSS必须严格遵守CSS与HTML标签层次，以下情况不会被这条CSS所应用：
<span class="span1"></span>
<p id="p1"><span class="span1"></span></p>
<div><span class="span1"></span></div>
5.中间逗号“,” ：表示并列关系，即该CSS有多个名称（可以精简重复的CSS样式）
如body,form,div{...}会为所有的<body></body>、<form></form>、<div></div>增加样式
6.名后冒号“:”：一般是指状态
如a:hover表示当鼠标悬停在a标签上时使用的样式
7.style中点代表类class,#代表id,也可以注释
h1代表html中的元素
tr.hr代表元素的子元素
css样式小框架的更多相关文章
- css样式小技巧
1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...
- css 样式小窍门
css 样式小窍门 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- select自定义下拉三角符号,css样式小细节
本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...
- 小谢第8问：ui框架的css样式如何更改
目前有三种方法, 1.使用scss,增加样式覆盖,但是此种方法要求css的className需要与框架内的元素相一致,因此修改时候需要特别注意,一个父级的不同就可能修改失败 2.deep穿透,这种方法 ...
- Vue 框架-05-动态绑定 css 样式
Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...
- CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式
最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...
- CSS 样式显示为小手
因为工作需要把鼠标放上去显示小手形状, css样式如下: style="cursor:hand" 部分浏览器支持 style="cursor:pointer&quo ...
- WebStorm 配置微信小程序开发 用html样式打开wxml 用css样式打开wxss 配置微信小程序提醒
1.点开preferences 2.搜索找到“File Types” 3.找到"HTML",点击“+”按钮,添加“*.wxml”然后“apply” 4.和3一样,再找到 ‘casc ...
- 微信小程序的布局css样式
微信小程序的布局css样式width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-w ...
随机推荐
- [CodeForces954D]Fight Against Traffic（最短路）
Description 题目链接 Solution 从起点和终点分别做一次最短路并记录结果 枚举每一条可能的边判断 Code #include <cstdio> #include < ...
- talent-aio源码阅读小记（二）
我们上一篇提到了talent-aio的四类Task:DecodeRunnable.HandlerRunnable.SendRunnable.CloseRunnable,并且分析了这些task的基类Ab ...
- PHP.15-mysqli
从PHP5.0开始可以使用mysql(i), 是一个面向对象的技术(新加功能都会以对象形式添加) i:表示改进,1. 功能增加了, 2,效率大大增加(以后的PHP项目改成mysqli),3,更稳定 m ...
- 探究SynchronizationContext在.Net异步编程中的地位
原文:探究SynchronizationContext在.Net异步编程中的地位 引言: 多线程编程/异步编程非常复杂,有很多概念和工具需要去学习,贴心的.NET提供Task线程包装类和await/a ...
- mt_vqmon异常数据分析
mt_vqmon异常数据分析 1.首缓冲时间值异常(1) 分析:当第一个m3u8请求时,已经记录request时间,1423716972224, 正常情况会立即请求分片列表. 上述图表明请求了一个m3 ...
- 【Spiral Matrix II】cpp
题目: Given an integer n, generate a square matrix filled with elements from 1 to n2 in spiral order. ...
- Python学习-day19 django基础篇
Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...
- 1079 Total Sales of Supply Chain （25 分）（树的遍历）
给出一颗销售供应的树,树根唯一.在树根处货物的价格为p,然后从根节点开始没往结点走一层,该层的货物价格将会在父节点的价格上增加r%.给出每个叶节点的货物量求出他们的价格之和 #include<b ...
- GCC 7.3 for Windows
GCC 6.1x Compilers 下载地址1: Mingw gcc 6.30下载 这个是某微软员工编译的版本 MinGW is a port of GCC to Windows. It is fr ...
- STL之list使用简介
构造函数 list<int> c0; //空链表 list<); //建一个含三个默认值是0的元素的链表 list<,); //建一个含五个元素的链表,值都是2 list< ...