文档章节

#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
Django 实战1:搭建属于自己社工查询系统(上)

前面的文章已经把模板、模型、视图、表单等知识点逐一讲解,大家已经熟悉它们具体用法。但如何将其串联起来还一筹莫展。本篇文章分享我之前做过的一个小项目,帮助大家抹开这一层迷雾。 1 想...

猴哥Yuri
04/09
0
0
免费的编程中文书籍索引

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

modernizr
2014/04/08
6.9K
24

没有更多内容

加载失败,请刷新页面

加载更多

利用碎片化时间Get Linux系统

起初,我做着一份与IT毫无关系的工作,每月领着可怜的工资,一直想改变现状,但无从下手,也就是大家熟知的迷茫。我相信,每一个人都会或多或少的经历过迷茫,迷茫每一个选择,迷茫工作或者生...

linuxprobe16
17分钟前
0
0
OSChina 周日乱弹 —— 恨不得给你买张飞机挂票

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @开源中国首席灵魂师:分享张希/曹方的单曲《认真地老去》 来不及认真的年轻过,就认真的老去! 《认真地老去》- 张希/曹方 手机党少年们想听...

小小编辑
今天
168
6
如何实现靠谱的分布式锁?

分布式锁,是用来控制分布式系统中互斥访问共享资源的一种手段,从而避免并行导致的结果不可控。基本的实现原理和单进程锁是一致的,通过一个共享标识来确定唯一性,对共享标识进行修改时能够...

郑加威
今天
2
0
Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
3
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部