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 ...
随机推荐
- realloc函数的用法
realloc(void *__ptr, size_t __size):更改已经配置的内存空间,即更改由malloc()函数分配的内存空间的大小. 如果将分配的内存减少,realloc仅仅是改变索引的 ...
- python开发基础之字符编码、文件处理和函数基础
字符编码 为什么要有字符编码? 字符编码是为了让计算机能识别我们人写的字符,因为计算机只认识高低电平,也就是二进制数"0","1". 一个文件用什么编码方式存储 ...
- HTML中body相关标签-03
今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...
- P3817 小A的糖果（洛谷月赛）
P3817 小A的糖果 题目描述 小A有N个糖果盒,第i个盒中有a[i]颗糖果. 小A每次可以从其中一盒糖果中吃掉一颗,他想知道,要让任意两个相邻的盒子中加起来都只有x颗或以下的糖果,至少得吃掉几颗糖 ...
- Go实现try-catch-finally机制
前言 许多主流语言诸如:Java.Python都实现了try-catch-finally机制,而Go处理错误的方式却与前两种语言不同.关于Go处理异常的方式是好是坏仁者见仁智者见智,笔者还是更喜欢tr ...
- Vbs 测试程序三
一段被写滥了的VBS代码 值得一提的是感兴趣的同学可以把 chr(13) + chr(13) + chr(13) 改为chr(11) + chr(11) + chr(11) 不赘述 on error ...
- CodeIgniter学习笔记四：CI中的URL相关函数，路由，伪静态，去掉index.php
一.URL相关函数 1.加载url模块 加载url有两种方式: a.自动加载:在 application/config/autoload.php 中开启 $autoload['helper'] = a ...
- php导出数据为CSV文件DEMO
代码示例: private function _download_send_headers($filename) { // disable caching $now = gmdate("D, ...
- HTML DOM简易学习笔记
文字版:https://github.com/songzhenhua/github/blob/master/HTML DOM简易学习笔记.txt 学习地址:http://www.w3school.co ...
- 哲学家就餐-同步问题解析-python
五个哲学家吃五盘通心粉,由于通心粉很滑,所以必须要拿起左右两边的叉子才能吃到. 叉子的摆放如图所示. 那么问题来了:能为每一个哲学家写一段描述其行为的程序,保证不会出现死锁. 解法1:让他等待能够使用 ...