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:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

CSS Borders

1> Border Style

  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border
  • double - Defines a double border
  • groove - Defines a 3D grooved border. The effect depends on the border-color value
  • ridge - Defines a 3D ridged border. The effect depends on the border-color value
  • inset - Defines a 3D inset border. The effect depends on the border-color value
  • outset - Defines a 3D outset border. The effect depends on the border-color value
  • none - Defines no border
  • hidden - 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 and width 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)的更多相关文章

  1. 关于CSS和JS中用到的各种Height和Width的问题

    自己记不住,列一下关于CSS和JS中用到的各类有关Height和Width属性的介绍对比. 所属类别 属性名 意义 其他 浏览器模型 Screen.height 浏览器窗口所在的屏幕的高度(单位像素) ...

  2. 【CSS】Beginner5:Margins&Padding

    1.Properties for spacing-out elements 外边距:A margin is the space space outside something 内边距:padding ...

  3. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  4. [html]CSS中的margin、border、padding区别

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  5. CSS中的margin、border和padding的区别

    aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA

  6. CSS笔记

    初级篇===========================选择器============================元素选择器css:h1{color: red}html:<h1> ...

  7. html+css笔记

    文档结构 1.html文档结构 ①文档类型声明 严格型(标准模式):    <!DOCTYpE HTML>   HTML5 XHTML 1.0:<!DOCTYpE html pUbL ...

  8. CSS笔记(十五)CSS3之用户界面

    参考:http://www.w3school.com.cn/css3/css3_user_interface.asp 在 CSS3 中,新的用户界面特性包括重设元素尺寸.盒尺寸以及轮廓等. 新的用户界 ...

  9. CSS笔记(三)背景

    CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果. 参考:http://www.w3school.com.cn/css/css_background.asp 背景色 p {backg ...

随机推荐

  1. Android中Activity的四种启动模式

    要了解Android的启动模式先要了解一下Activity的管理方式: 1.Activity的管理机制 Android的管理主要是通过Activity栈来进行的.当一个Activity启动时,系统根据 ...

  2. Struts的文件下载功能实现代码

    Action: package com.tengfeiyang.action; import java.io.File; import java.io.FileInputStream; import ...

  3. POJ 1016 模拟字符串

    Numbers That Count Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 20396   Accepted: 68 ...

  4. HDU1257

    最少拦截系统 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  5. document.body.scrollTop or document.documentElement.scrollTop

      用Javascript获取DOM节点相对于页面的绝对坐标时,需要计算当前页面的滚动距离,而这个值的获取又取决于浏览器. 在Firefox或Chrome浏览器的控制台可以查看document.bod ...

  6. 使用powershell提权的一些技巧

    原文:http://fuzzysecurity.com/tutorials/16.html 翻译:http://www.myexception.cn/windows/1752546.html http ...

  7. Jackson转换对象为json的时候报java.lang.stackoverflowerror

    无论在将一个对象转为json字符串的时候采用何种算法,如果你的对象的属性的类型不是基本类型或对应的引用类型,转换应该都不会就此结束,那么有一种方式可以导致这种转换陷入无限循环:将某个对象的属性设为对象 ...

  8. 字符串格式化命令 sprintf

    原型 int sprintf( char *buffer, const char *format, [ argument] … ); 参数列表 buffer:char型指针,指向将要写入的字符串的缓冲 ...

  9. CCLabelAtlas

    1.CCLabelAtlas 的具体用法 CCLabelAtlas *pLabel = new CCLabelAtlas;pLabel ->initWithString("0123&q ...

  10. php课程---练习(联系人信息表)

    做一个联系人表,实现增删改功能 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...