1、Three Ways to Insert CSS

  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<head>

<style>

body {

  background-color: linen;

}

h1 {

  color: maroon;

  margin-left: 40px;

}

</style>

</head>

Inline Styles

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The example below shows how to change the color and the left margin of a <h1> element:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

2、CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

backgroud color 、 text color 、border color

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

3、CSS Backgrounds

The CSS background properties are used to define the background effects for elements.

CSS background properties:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

body {

  background-image: url("paper.gif");

}

By default, the background-image property repeats an image both horizontally and vertically.

body {

  background-image: url("gradient_bg.png");

  background-repeat: repeat-x;

}

Background Image - Fixed position

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

body {

  background-image: url("img_tree.png");

  background-repeat: no-repeat;

  background-position: right top;

  background-attachment: fixed;

}

Background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for background is background:

body {

  background: #ffffff url("img_tree.png") no-repeat right top;

}

4、CSS Borders

Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

  • 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

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

Border - Shorthand Property

You can also specify all the individual border properties for just one side:

p {

  border-left: 6px solid red;

  background-color: lightgrey;

}

Rounded Borders

The border-radius property is used to add rounded borders to an element:

p {

  border: 2px solid red;

  border-radius: 5px;

}

5、CSS Margins

he CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

If the margin property has three values:

  • margin: 25px 50px 75px;

    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px
 

If the margin property has two values:

  • margin: 25px 50px;

    • top and bottom margins are 25px
    • right and left margins are 50px

The auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

div {

  width: 300px;

  margin: auto;

  border: 1px solid red;

}

The inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):

<!DOCTYPE html>

<html>

<head>

<style>

div {

  border: 1px solid red;

  margin-left: 100px;

}

p.ex1 {

  margin-left: inherit;

}

</style>

</head>

<body>

<h2>Use of the inherit value</h2>

<p>Let the left margin be inherited from the parent element:</p>

<div>

<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>

</div>

</body>

</html>

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

Look at the following example:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

  margin: 0 0 50px 0;

}

h2 {

  margin: 20px 0 0 0;

}

</style>

</head>

<body>

<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. Then, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.



The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.


</body>

</html>




similar padding


6、CSS Box Model


All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.


The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.








Explanation of the different parts:


  • Content - The content of the box, where text and images appear
    • 

  • Padding - Clears an area around the content. The padding is transparent
    • 

  • Border - A border that goes around the padding and content
    • 

  • Margin - Clears an area outside the border. The margin is transparent


7、CSS Outline


An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".


CSS has the following outline properties:


  • outline-style
    • 

  • outline-color
    • 

  • outline-width
    • 

  • outline-offset
    • 

  • outlin




Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.




The outline-style property specifies the style of the outline, and can have one of the following values:


  • dotted - Defines a dotted outline
    • 

  • dashed - Defines a dashed outline
    • 

  • solid - Defines a solid outline
    • 

  • double - Defines a double outline
    • 

  • groove - Defines a 3D grooved outline
    • 

  • ridge - Defines a 3D ridged outline
    • 

  • inset - Defines a 3D inset outline
    • 

  • outset - Defines a 3D outset outline
    • 

  • none - Defines no outline
    • 

  • hidden - Defines a hidden outline


Outline - Shorthand property


The outline property is a shorthand property for setting the following individual outline properties:


  • outline-width
    • 

  • outline-style (required)
    • 

  • outline-color


The outline property is specified as one, two, or three values from the list above. The order of the values does not matter.




p.ex1 {outline: dashed;}

p.ex2 {outline: dotted red;}

p.ex3 {outline: 5px solid yellow;}

p.ex4 {outline: thick ridge pink;}




Outline Offset


The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.


The following example specifies an outline 15px outside the border edge:




												


											
CSS：Tutorial one的更多相关文章
	

    
						
  1. CSS：Tutorial four
		
    1.CSS Tables To specify table borders in CSS, use the border property. The example below specifies a ...
    
		
    2. 
						
  2. CSS：Tutorial three
		
    1.CSS Links links can be styled differently depending on what state they are in. The four links stat ...
    
		
    3. 
						
  3. CSS：Tutorial two
		
    1.CSS Text text color, text align... Text Decoration The text-decoration property is used to set or  ...
    
		
    4. 
								
  4. Hover.css：一组超实用的 CSS3 悬停效果和动画
		
    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
    
		
    5. 
						
  5. CSS：opacity 的取值范围是 0~1
		
    CSS:opacity 的取值范围是 0~1,难怪设置为 1~100 看不到效果.
    
		
    6. 
						
  6. CSS：CSS定位和浮动
		
    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...
    
		
    7. 
						
  7. CSS： word-wrap和word-break
		
    最近修改页面排版的一些问题,发现关于内容分词换行有两个主要的CSS: word-wrap 和 word-break 特别是word-wrap还有个取值break-word,更使得这两个属性容易混淆.  ...
    
		
    8. 
						
  8. CSS：不可思议的border属性
		
    原文:Magic of CSS border property 译文:不可思议的CSS border属性 译者:dwqs 在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的 ...
    
		
    9. 
						
  9. Normalize.css：优化重置CSS默认属性
		
    Normalize.css:优化重置CSS默认属性 官方网站:http://necolas.github.io/normalize.css/ 项目仓库:https://github.com/necol ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. PAT 1071 Speech Patterns[一般]
			
    1071 Speech Patterns (25 分) People often have a preference among synonyms of the same word. For exam ...
    
			
    2. 
						
  2. List集合的ForEach扩展
			
           public static void ForEach<T>(this IEnumerable<T> enumerableSource, Action<T&g ...
    
			
    3. 
						
  3. LeetCode：课程表【207】
			
    LeetCode:课程表[207] 题目描述 现在你总共有 n 门课需要选,记为 0 到 n-1. 在选修某些课程之前需要一些先修课程. 例如,想要学习课程 0 ,你需要先完成课程 1 ,我们用一个匹 ...
    
			
    4. 
						
  4. LeetCode：路径总和II【113】
			
    LeetCode:路径总和II[113] 题目描述 给定一个二叉树和一个目标和,找到所有从根节点到叶子节点路径总和等于给定目标和的路径. 说明: 叶子节点是指没有子节点的节点. 示例:给定如下二叉树, ...
    
			
    5. 
						
  5. PolyBase--整合SQLServer和Hadoop
			
    我们一直强调,大数据和传统的关系数据库并不对立,未来公司的的业务将会是大数据和关系型数据库的整合.微软的PolyBase打响了SQL Server和Hadoop整合的第一枪. 在2012年度的SQL  ...
    
			
    6. 
						
  6. redis 笔记04     服务器、复制
			
    服务器 1. 一个命令请求从发送到完成主要包括以下步骤: 1). 客户端将命令请求发送给服务器 2). 服务器读取命令请求,并分析出命令参数 3). 命令执行器根据参数查找命令的实现函数,然后执行实现 ...
    
			
    7. 
						
  7. bug最后汇总-2018/08/03
			
    一.对于点击后请求时间过长的按钮 现象:容易给用户点击无效的错觉,从而导致多次点击,从而发出多个相同请求,这显然是不符合我们意愿的 解决: 用户点击发出多个请求:加个锁,当用户点击后,将锁关闭,使用户 ...
    
			
    8. 
						
  8. JMeter接口测试和压力测试
			
    JMeter接口测试和压力测试 JMeter可以做接口测试和压力测试.其中接口测试的简单操作包括做http脚本(发get/post请求.加cookie.加header.加权限认证.上传文件).做web ...
    
			
    9. 
						
  9. java类执行顺序
			
    1. 静态初始化块 > 初始化块 > 构造器 2. 父类 > 子类 综合下来顺序就是: 父类静态初始化块和静态成员变量 子类静态初始化块和静态成员变量 父类初始化块和普通成员变量 父 ...
    
			
    10. 
						
  10. Git服务器的Gitosis安装配置及gitignore的使用方法
			
    Git服务器Gitosis安装设置 1.安装 openssh服务器 sudo apt-get install openssh-server openssh-client 2.创建个人公钥和私钥 在默认 ...
    
			
    11.