CSS-An Overview、Design a Button for Your Website-优快云博客

本文链接：https://blog.youkuaiyun.com/smallbean_/article/details/50866876

本文介绍了CSS的基本概念及其在网页设计中的应用。包括选择器、注释、颜色设置等基础知识，并探讨了像素与ems单位的区别及应用场景。此外，还提供了字体类型的知识和按钮样式的示例。

What css is?

CSS (which stands for Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML.

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

selector {
    property: value;
}

comments

/*I'm a comment!*/

hexadecimal values.

h1 {
    color: #8B1C62;
}

h2 {
    color: #FF7256;
}

h3 {
    color: #FFC125;
}

Pixels and ems

A pixel is a dot on your computer screen. Specifying font sizes in pixels is great when you want the user to see exactly on their screen what you designed on yours, though it assumes your screens are of similar size.

What if the user is using a screen that's a very different size from yours, though (like a smartphone screen)? Enter ems. (Don't confuse these with the <em></em> tags we use for emphasis!)

font knowledge

serif: A font with little decorative bits on the ends of the strokes that make up letters. Do a search on "serif" to see what we mean.

sans-serif: A plain-looking font, like this one. It doesn't have the little doohickies on the ends of letters like a serif font does.

cursive: A scripty font! It looks like cursive writing.

这里写图片描述

Backup values

p {
    font-family: Tahoma, Verdana, sans-serif;
}
如果没有Tahoma字体，就会考虑Verdana，如果再没有，才会考虑默认sans-serif

text-decoration

这里写图片描述

Design a Button for Your Website

use <div></div>

height
width
border-color
background-color

border-radius

Positioning your button

margin: auto;

  Make sure to set equal margins on each side of this HTML element. When the margins are equal, the object is centered.

text-align: center;

   is how you center text elements.

add a link

这里写图片描述