文档章节

#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
2018/04/09
0
0
啦啦啦哈利路亚/laravel_biji

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

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

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 没时间 没头发 但有钱

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @开源中国总经办主任 :分享齐一的单曲《这个年纪》 《这个年纪》- 齐一 手机党少年们想听歌,请使劲儿戳(这里) @肿肿卷 :我真的可以睡一天...

小小编辑
49分钟前
11
4
Django进阶 1.1 ORM基础—ORM 1.2.1 增删改查之查询 1.2.2 删改增 (1) 1.2.3 删改增 (2)

ORM基础 ORM是Django操作数据库的API,Django的作者将sql语句封装在里面供我们使用。 我们前面还提到过Django提供一个模拟数据库的工具,sqlite,供我们学习测试使用。 如果我们想使用mysql...

隐匿的蚂蚁
今天
3
0
Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
3
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
3
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部