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 ...
随机推荐
- Android中Activity的四种启动模式
要了解Android的启动模式先要了解一下Activity的管理方式: 1.Activity的管理机制 Android的管理主要是通过Activity栈来进行的.当一个Activity启动时,系统根据 ...
- Struts的文件下载功能实现代码
Action: package com.tengfeiyang.action; import java.io.File; import java.io.FileInputStream; import ...
- POJ 1016 模拟字符串
Numbers That Count Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 20396 Accepted: 68 ...
- HDU1257
最少拦截系统 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...
- document.body.scrollTop or document.documentElement.scrollTop
用Javascript获取DOM节点相对于页面的绝对坐标时,需要计算当前页面的滚动距离,而这个值的获取又取决于浏览器. 在Firefox或Chrome浏览器的控制台可以查看document.bod ...
- 使用powershell提权的一些技巧
原文:http://fuzzysecurity.com/tutorials/16.html 翻译:http://www.myexception.cn/windows/1752546.html http ...
- Jackson转换对象为json的时候报java.lang.stackoverflowerror
无论在将一个对象转为json字符串的时候采用何种算法,如果你的对象的属性的类型不是基本类型或对应的引用类型,转换应该都不会就此结束,那么有一种方式可以导致这种转换陷入无限循环:将某个对象的属性设为对象 ...
- 字符串格式化命令 sprintf
原型 int sprintf( char *buffer, const char *format, [ argument] … ); 参数列表 buffer:char型指针,指向将要写入的字符串的缓冲 ...
- CCLabelAtlas
1.CCLabelAtlas 的具体用法 CCLabelAtlas *pLabel = new CCLabelAtlas;pLabel ->initWithString("0123&q ...
- php课程---练习(联系人信息表)
做一个联系人表,实现增删改功能 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...