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. [LintCode] Remove Linked List Elements 移除链表元素

    Remove all elements from a linked list of integers that have value val. Have you met this question i ...

  2. Linux_系统管理命令(工作中经常使用到的)

    查看网络配置信息 ifconfig 查看系统资源信息(类似win系统资源管理器) top (ps: load average 负载 Task 进程   Cpus/Mem  swap 交换分区 类似wi ...

  3. 概率论与数理统计ppt链接

    http://e-learning.ecust.edu.cn/G2S/Template/View.aspx?courseId=26835&topMenuId=72352&action= ...

  4. 关于 QRCode 的问题[C# 生成二维码固定大小]

    一直在纠结了一天多的问题:就是为什么生成的二维码会随着内容多少的变化而变化大小,但是为什么网上做出来的二维码内容变化但是大小却没有变化?刚开始的时候我就一直围绕着是不是根据缩略图来做的,但是这个方法行 ...

  5. svn学习笔记(2)操作----还原,重命名,冲突处理,权限配置等

    1.查看某个文件的所有版本信息 2.版本还原,还原到之前的某一个版本 通过show log查看 查看某个文件的所有版本后,可以在这些版本之间自由切换 3.文件改名 文件改名字给我们一个教训: 如:in ...

  6. 应该掌握的MySQL命令、MySQL语句

    一.MySQL常用的命令: 1. 连接数据库:mysql>mysql -uroot -p回车,再输入密码   mysql -h 192.168.0.200 -P 3306 -u root -p2 ...

  7. SpringBoot配置Email发送功能

    相信使用过Spring的众多开发者都知道Spring提供了非常好用的 JavaMailSender接口实现邮件发送.在Spring Boot的Starter模块中也为此提供了自动化配置.下面通过实例看 ...

  8. time模块目录下自己建立一个名为log的文件夹

    使用python调用ping命令,然后在日志中记录ping的结果,用来监测网络连通情况. 代码: [python]from time import *from subprocess import *w ...

  9. Web前端开发基础 第四课(认识CSS样式)

    CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素( ...

  10. Boyer-Moore algorithm

    http://www-igm.univ-mlv.fr/~lecroq/string/node14.html Main features performs the comparisons from ri ...