文档章节

#css#学习笔记1

Hochikong
 Hochikong
发布于 2016/12/01 17:54
字数 651
阅读 19
收藏 0
css

illustration

#1.css由selector和declaration组成 比如:

.classA
			{
				text-align: center;
				font-size: 30px;
				color: #F0FFFF;
			}

#2.css的注释类似Java的块注释 比如:

#forh1
			{
				text-align: center;
				color: darkgreen;
				/* id只能用一次,class可以用多次 */
			}

注意,HTML的注释是<!-- -->,不要把知识混淆了

Python行注释:

#This is for python

或者:

"""
This is a docsting
"""

或者:

'''
This 
'''

Java注释:

//This for Java

或者块注释:

/* This is for Java */

文档注释:

/** Similar to docstring */

#3.id和class id和class相当于配置项,HTML标签组按照需求选择配置项,然后根据配置项按照特定的格式进行显示,比如:

这是id的一个定义,用"#"标记:

#forh1
			{
				text-align: center;
				color: darkgreen;
				/* id只能用一次,class可以用多次 */
			}

然后使用的时候可以这样:

<h1 id=forh1>
			this is a fucking book
		</h1>

要注意的是,同个id只能用一次,如果这个样式表在HTML文件内,那么像上面的forth1,只能在h1中使用,而不能再在其他的块中使用,否则会导致不可预料的问题。如果样式表在单独的css文件中,则这个id可以被不同的HTML文件调用,但同样遵守上面的一个文件里,同一id只出现一次的原则。

class和id相比,能在同一个文件内多次使用,用"."标记:

.classA
			{
				color: aquamarine;
			}

使用时:

<body class="classA">
		fuck off
	</body>

另外还可以这样,直接指定在样式表里指定谁要用这个样式:

h1.classA
			{
				text-align: center;
				font-size: 30px;
				color: #F0FFFF;
			}

这样会让所有的h1元素都用同一样式

另外还有个直接用元素和声明搭配:

body
		    {
		    	background-color: lightgrey;
		    }

至于怎么选择,是你的问题了,个人倾向用class,然后在每一个元素的开头插入class="xxx",而不是直接xxx.classA这样的懒方法。

#4.插入样式表 样式表有三种,但是大的样式表应该用外部文件定义:

<head>
		<meta charset="UTF-8">
		<title>外部样式表</title>
		<link rel="stylesheet"/ type="text/css" href="mystyle.css">            
                                            <!-- stylesheet:定义一个外部加载的样式表 -->
	</head>

外部的样式表mystyle.css:

p
{
	color: bisque;
	font-size: 20px;
}
body
{
	background-color: khaki;
}

将具体页面和样式表配置分离是一个好的实践

如果要配置的样式比较少,也可以选择内部样式表:

	<head>
		<meta charset="UTF-8">
		<title>这是我的第一个手写css文件</title>
		<style>
			body
			{
				background-color: cornflowerblue;
				font-family: "eras medium itc";
				font-size: 10px;
				/* diaoni1 */
		</style>
	</head>

还有一个称之为内联样式的方式:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

视情况使用不同的方式。

就酱

© 著作权归作者所有

共有 人打赏支持
Hochikong
粉丝 19
博文 113
码字总数 59961
作品 1
广州
程序员
私信 提问
前端的学习

html笔记; 技术点关键词: DOM 标签元素 标签类型 节点 样式 属性 不同浏览器支持的差异性(很小一部分) 框架布局 弹窗 浮动 js笔记; 技术点关键词: 变量 方法 参数 对象 触发和调用 异步数据交...

noteman
2015/12/14
78
0
Less-学习笔记

这是less官网的介绍: http://www.1024i.com/demo/less/document.html 大家都是在一起学习,最好的地方无疑就是官网,不过每个人学习方式和基础不同,以至于学完后掌握才会出现差异 开源中国...

透笔度
2015/10/16
137
0
一些CSS方面的知识

1.学习CSS"盒子模型"(上):http://www.108js.com/article/article8/80058.html?id=1766 2.学习CSS"盒子模型"(下):http://www.108js.com/article/article8/80059.html?id=1767 3.css知多......

IT追寻者
2016/06/23
31
0
免费的编程中文书籍索引

免费的编程中文书籍索引,欢迎投稿。 国外程序员在 stackoverflow 推荐的程序员必读书籍,中文版。 stackoverflow 上的程序员应该阅读的非编程类书籍有哪些? 中文版 github 上的一个流行的编...

modernizr
2014/04/08
6.9K
24
啦啦啦哈利路亚/laravel_biji

采用Laravel5.1框架的在线笔记系统 演示地址 http://120.27.102.104/auth/login 项目介绍 基于Laravel+Bootstrap+MariaDB开发系统架构 功能说明 在线笔记系统基于B/S结构的社区性质的协调信息...

啦啦啦哈利路亚
2017/03/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

用any-loader封装jQuery的XHR —— 随便写着玩系列

哎,都说没人用JQuery啦,叫你别写这个。 其实我也是好高骛远使用过npm上某个和某个很出名的XHR库,嗯,认识我的人都知道我喜欢喷JQ,以前天天喷,见面第一句,你还用JQ,赶紧丢了吧。但我也...

曾建凯
28分钟前
0
0
聊聊storm的AggregateProcessor的execute及finishBatch方法

序 本文主要研究一下storm的AggregateProcessor的execute及finishBatch方法 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout......

go4it
今天
3
0
大数据教程(7.5)hadoop中内置rpc框架的使用教程

博主上一篇博客分享了hadoop客户端java API的使用,本章节带领小伙伴们一起来体验下hadoop的内置rpc框架。首先,由于hadoop的内置rpc框架的设计目的是为了内部的组件提供rpc访问的功能,并不...

em_aaron
今天
5
0
CentOS7+git+github创建Python开发环境

1.准备CentOS7 (1)下载VMware Workstation https://pan.baidu.com/s/1miFU8mk (2)下载CentOS7镜像 https://mirrors.aliyun.com/centos/ (3)安装CentOS7系统 http://blog.51cto.com/fengyuns......

枫叶云
昨天
3
0
利用ibeetl 实现selectpicker 的三级联动

1. js 直接写在html页面上面,ibeetl 就可以动态地利用后台传上来的model List ,不需要每次点击都要ajax请求后台 2. 使用selectpicker 的时候,除了对selecct option的动态处理后,还需要 $("#...

donald121
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部