CSS 笔记一(Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width)
Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width
CSS Introduction:
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS Syntax
CSS Comments
- A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
Example
p {
color: red;
/* This is a single-line comment */
text-align: center;
} /* This is
a multi-line
comment */
CSS Selectors
- The element Selector
- The id Selector
- The class Selector
- Grouping Selectors
Example
/* The element Selector */
p {
text-align: center;
color: red;
}
/* The id Selector */
#para1 {
text-align: center;
color: red;
}
/* The class Selector */
.center {
text-align: center;
color: red;
}
p.center {
text-align: center;
color: red;
}
/* Grouping Selectors */
h1, h2, p {
text-align: center;
color: red;
}
Three Ways to Insert CSS
- External style sheet
- Internal style sheet
- Inline style
CSS Backgrounds
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
1> Background Color
A color is most often specified by:
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
- a valid color name - like "red"
2> Background Image
body {
background-image: url("bgdesert.jpg");
}
3> Background Repeat
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
Value | Description | Play it |
---|---|---|
repeat | The background image will be repeated both vertically and horizontally. This is default | Play it » |
repeat-x | The background image will be repeated only horizontally | Play it » |
repeat-y | The background image will be repeated only vertically | Play it » |
no-repeat | The background-image will not be repeated | Play it » |
initial | Sets this property to its default value. | Play it » |
inherit | Inherits this property from its parent element. |
4> Background Attachment:
background-attachment: scroll|fixed|local|initial|inherit;
Value | Description |
---|---|
scroll | The background scrolls along with the element. This is default |
fixed | The background is fixed with regard to the viewport |
local | The background scrolls along with the element's contents |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
5> Background Position:
background-position: value;
Property Values:
- [left/center/right] [top/center/bottom]
- x% y%
- xpos ypos (any CSS units)
- initial
- inherit
6> Background - Shorthand property
1 body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
The order of the property values:
background-color
background-image
background-repeat
background-attachment
background-position
CSS Borders
1> Border Style
dotted
- Defines a dotted borderdashed
- Defines a dashed bordersolid
- Defines a solid borderdouble
- Defines a double bordergroove
- Defines a 3D grooved border. The effect depends on the border-color valueridge
- Defines a 3D ridged border. The effect depends on the border-color valueinset
- Defines a 3D inset border. The effect depends on the border-color valueoutset
- Defines a 3D outset border. The effect depends on the border-color valuenone
- Defines no borderhidden
- Defines a hidden border
Example
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Result
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A hidden border.
A mixed border.
2> Border Width
- A specific size (in px, pt, cm, em, etc)
- Three pre-defined values: thin, medium, or thick.
3> Border Color
4> Border - Shorthand Property
The border
property is a shorthand property for the following individual border properties:
border-width
border-style
(required)border-color
Example
p {
border: 5px solid red;
}
CSS Margins
- The CSS margin properties are used to generate space around elements.
- The margin properties set the size of the transparent space OUTSIDE the border.
property values
- auto - the browser calculates the margin
- length - specifies a margin in px, pt, cm, etc.
- % - specifies a margin in % of the width of the containing element
- inherit - specifies that the margin should be inherited from the parent element
Note: It is also possible to use negative values for margins; to overlap content.
CSS Padding
- The CSS padding properties define the white space between the element content and the element border.
- The padding clears an area around the content (inside the border) of an element.
property values
- length - specifies a padding in px, pt, cm, etc.
- % - specifies a padding in % of the width of the containing element
- inherit - specifies that the padding should be inherited from the parent elemen
??Note: The padding is affected by the background color of the element!
CSS Height and Width Dimensions
- The
height
andwidth
properties are used to set the height and width of an element.
1> width,min-width,max-width
2> height,min-height,max-height
CSS 笔记一(Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width)的更多相关文章
- 关于CSS和JS中用到的各种Height和Width的问题
自己记不住,列一下关于CSS和JS中用到的各类有关Height和Width属性的介绍对比. 所属类别 属性名 意义 其他 浏览器模型 Screen.height 浏览器窗口所在的屏幕的高度(单位像素) ...
- 【CSS】Beginner5:Margins&Padding
1.Properties for spacing-out elements 外边距:A margin is the space space outside something 内边距:padding ...
- CSS中的margin、border、padding区别
CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...
- [html]CSS中的margin、border、padding区别
图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
- CSS中的margin、border和padding的区别
aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA
- CSS笔记
初级篇===========================选择器============================元素选择器css:h1{color: red}html:<h1> ...
- html+css笔记
文档结构 1.html文档结构 ①文档类型声明 严格型(标准模式): <!DOCTYpE HTML> HTML5 XHTML 1.0:<!DOCTYpE html pUbL ...
- CSS笔记(十五)CSS3之用户界面
参考:http://www.w3school.com.cn/css3/css3_user_interface.asp 在 CSS3 中,新的用户界面特性包括重设元素尺寸.盒尺寸以及轮廓等. 新的用户界 ...
- CSS笔记(三)背景
CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果. 参考:http://www.w3school.com.cn/css/css_background.asp 背景色 p {backg ...
随机推荐
- [LintCode] Remove Linked List Elements 移除链表元素
Remove all elements from a linked list of integers that have value val. Have you met this question i ...
- Linux_系统管理命令(工作中经常使用到的)
查看网络配置信息 ifconfig 查看系统资源信息(类似win系统资源管理器) top (ps: load average 负载 Task 进程 Cpus/Mem swap 交换分区 类似wi ...
- 概率论与数理统计ppt链接
http://e-learning.ecust.edu.cn/G2S/Template/View.aspx?courseId=26835&topMenuId=72352&action= ...
- 关于 QRCode 的问题[C# 生成二维码固定大小]
一直在纠结了一天多的问题:就是为什么生成的二维码会随着内容多少的变化而变化大小,但是为什么网上做出来的二维码内容变化但是大小却没有变化?刚开始的时候我就一直围绕着是不是根据缩略图来做的,但是这个方法行 ...
- svn学习笔记(2)操作----还原,重命名,冲突处理,权限配置等
1.查看某个文件的所有版本信息 2.版本还原,还原到之前的某一个版本 通过show log查看 查看某个文件的所有版本后,可以在这些版本之间自由切换 3.文件改名 文件改名字给我们一个教训: 如:in ...
- 应该掌握的MySQL命令、MySQL语句
一.MySQL常用的命令: 1. 连接数据库:mysql>mysql -uroot -p回车,再输入密码 mysql -h 192.168.0.200 -P 3306 -u root -p2 ...
- SpringBoot配置Email发送功能
相信使用过Spring的众多开发者都知道Spring提供了非常好用的 JavaMailSender接口实现邮件发送.在Spring Boot的Starter模块中也为此提供了自动化配置.下面通过实例看 ...
- time模块目录下自己建立一个名为log的文件夹
使用python调用ping命令,然后在日志中记录ping的结果,用来监测网络连通情况. 代码: [python]from time import *from subprocess import *w ...
- Web前端开发基础 第四课(认识CSS样式)
CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素( ...
- Boyer-Moore algorithm
http://www-igm.univ-mlv.fr/~lecroq/string/node14.html Main features performs the comparisons from ri ...