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 ...
随机推荐
- python中的字符串内置方法小结
#!/usr/local/bin/python3 # -*- coding:utf-8 -*- ''' name="my wife is mahongyan" ---------- ...
- Qt的QWebChannel和JS、HTML通信/交互驱动百度地图
Qt的QWebChannel和JS.HTML通信/交互驱动百度地图 0 前言 我一个研究嵌入式的,不知道怎么就迷上了上位机,接了几个项目都是关于Qt,这个项目还是比较经典的,自己没事儿的时候也进行研究 ...
- 笔记-Python-language reference-5.the import system
笔记-Python-language reference-5.the import system 前言 经常用到import,module,对其中的机制及原理有一定的了解,但没有将各种信息前后连通起来 ...
- Hive数据导入导出的n种方式
Tutorial-LoadingData Hive加载数据的6种方式 #格式 load data [local] inpath '/op/datas/xxx.txt' [overwrite] into ...
- 5,Linux之文档与目录结构
Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到某一个目录下,用户通过操作目录来 ...
- DOS程序员手册(三)
56页 第4章DOS和BIOS接口 本章介绍了用户程序访问DOS内核和BIOS所提供的各种服务的方法.为了访问这 些服务,我们可以从任何编程语言中调用各个软件中断,这些中断便是我们在本 ...
- c语言在windows下和Mac下的不同表现!
最近给一个等级考试的C语言培训班上课,学生问起一些++的问题.让我好生为难.因为这些不同的编译器处理方式,在不同的系统下表现并不一致. 不管你洋洋洒洒论述多么一大篇,在事实面前就一下显得苍白了.虽然这 ...
- appium-手势密码实现-automationName 是Appium的情况
1. 红色区域的范围为:[66,575][1014,1523], 由于这块是一个整块,所以无法使用每个点的数据:因此只能使用LockPatternView对象拿到左上角的坐标值 2. 原理, 将九宫 ...
- JS——BOM、DOM
BOM.DOM BOM window对象 history对象 location对象 screen对象 DOM DOM对HTML元素访问操作 HTML DOM树 DOM 节点 DOM访问HTML元素 D ...
- An internal error occurred during: "Launching on Tomcat 7.x"
1.首先关闭MyEclipse工作空间.2.然后删除工作空间下的文件.“MyEclipse10\workspace.metadata.plugins\org.eclipse.core.runtime. ...