The front end of the CSS selector style

Article Directory

CSS Introduction

What is CSS
CSS usage

Inter Line
Inline
Outreach formula

Selector

The basic selector

Tag selector
Class selector
id selector
Wild selector
Selector priority basis

Combination selector

Groups (packets and nested) selector
Progeny (offspring) selectors
Adjacent (brother) selector
Composition priority selector

Attribute selectors
Pseudo class selector
Pseudo-element selector
Selector priority

Label Style

The basic style
Common styles

Font style
Text Style
Background Style
frame
The new border properties

dispaly property

CSS Introduction

What is CSS

Cascading Style Sheets (English name: Cascading Style Sheets) is a method used performance such as HTML or XML document-style computer language. CSS can not be statically modified pages, with a variety of scripting languages can also be dynamically formatted for each element on the page.

CSS usage

grammar structure:

Selector {properties: Property Value; properties: Property Value; properties: Property Value;}

The introduction of three kinds of ways:

Inter Line

<div style="width: 100px; height: 100px; background-color: red">CSS的第一种装饰方式</div>

Inline

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div>CSS的第二种装饰方式</div>
</body>

Outreach formula

file: my.css
div {
	width: 100px;
    height: 100px;
    background-color: red;
}

file: my.html
<head>
    <link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<div> CSS的第三种装饰方式</div>
</body>

Note page css styles should normally be written in a separate css file

Selector

The basic selector

Tag selector

All matching documents matching name tags and labels: such as div {} will match all documents div, span {} will match all documents span

div {
    background-color: yellow;
}

Class selector

All have matching document class attributes and attribute values of the red tags: The <sup class = "red"> </ sup> <sub class = "red"> </ sub> will be matched

.red {
    color: red;
}

Note:
Style class names do not start with a number (some browsers do not recognize).
Tag class attribute if you have multiple, use spaces.

id selector

Match all tags have div id attribute and attribute value document: such as <div id = "div"> </ div> <section id = "div"> </ section> will be matched, id selector must ensure the only single-document

#div {
    text-align: center;
}

Wild selector

All matching documents Tags: Usually, any kind of display html, body and body tag

* {
    border: solid;
}

Selector priority basis

The smaller base selector priority range is substantially inversely match the selector, matching range, the higher the priority
Priority is generally selected based on the selection accuracy is proportional to the match, the higher the matching precision, the higher the priority
Selector priority basis: id selector> class selector> tag selector> Wild selector

Combination selector

Groups (packets and nested) selector

分组，不同的选择器可以共用一个样式
div, p, span{
    color: red;
}
嵌套，后代选择器与标签组合使用
div  p,span{
    color: red;
}

Controlling a plurality of packet selectors disposable, one-time control nested nested plurality of selectors
In between the selector spaced, each selector bits can be any valid selection or selector in combination

Progeny (offspring) selectors

子代选择器用>连接
div > span {
    color: red;
}
后代选择器用空格连接
.sup .sub {
    color: red;
}

Disposable controlling a selector (selector logic that last), the pre-selector is a bit modifying selector
Each selector bits can be any legitimate selector or selectors combination
Descendant selector must be a parent-child relationship nesting, as a descendant selector can be nested and multi-level parent-child relationship

Adjacent (brother) selector

相邻选择器用+连接 对下不对上
.d1 + .d2 {
    color: red;
}
兄弟选择器用~连接 对下不对上
.d1 ~ .d3 {
    color: red;
}

Disposable controlling a selector (selector logic that last), the pre-selector is a bit modifying selector
Each selector bits can be any legitimate selector or selectors combination
Adjacent selectors must be directly adjacent relationship, sibling selectors may directly or indirectly adjacent neighbor relations

Composition priority selector

Combination of priority and the associated weight selector, and a weight of the weight
Correspondence between weights

Selector	Weights
Wildcard	1
label	10
Classes, properties	100
id	1000
!important	10000

Compare selector weights, weights and only care about not updated selector position
Not comparable between different levels of selectors: a class selector priority than the n selectors any combination tag

Attribute selectors

Selector	Functional Description
[ attr ]	Match tag has attributes attr
[Attr = selections]	Attr have matching attributes, the attribute value of the tag val
[Attr ~ = selections]	Match has attr attribute, attribute value contains the specified words label.
[Attr \| = selections]	Match has attr property, the property value with the specified attribute value to tag the beginning of the value that must be a whole word.
[Attr = selections]	Match has attr attribute, attribute value begins with the tag val
[$ = Attr selections]	Match has attr attribute, attribute value ends with the tag val
[* = Attr selections]	Attr have matching attributes, attribute values comprising labels val

<head>
    <style>
		只要有xxx属性名的标签都找到
        [xxx] {
            color: red;
        }
        只要标签有属性名为xxx并且值为
        [xxx='1'] {
            color: blue;
        }
        规定p标签内部必须有属性名为xxx并且值为2的标签
        p[xxx='2'] {
          color: green;
        }
    </style>
</head>
<body>
<p xxx>我只有属性名</p>
<p xxx="1">我有属性名和属性值并且值为1</p>
<p xxx="2">我有属性名和属性值并且值为2</p>
</body>

Pseudo class selector

Selector	Types of	Functional Description
a:link	Link pseudo class selector	Select a matching element, and matching elements are defined hyperlink has not been visited. Commonly used to describe the link point
a:hover	User behavior selector	Selecting a matching element, and the user mouse over the element a.
a:active	User behavior selector	Matching a selected element and the matching element is activated. Commonly used to describe the links and buttons points
a:visited	Link pseudo class selector	Select a matching element, and matching elements are defined hyperlinks and has been visited. Commonly used to describe the link point
a:focus	User behavior selector	Selecting a matching element, and obtaining a focus matching elements

<head>
    <style>
        未访问的链接
        a:link {
            color: red;
        }
        鼠标移动到链接上
        a:hover {
            color: yellow;
        }
        选定的连接
        a:active {
            color: black;
        }
        已访问的链接
        a:visited {
            color: green;
        }
        input输入框获取焦点时样式
        input:focus {
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">笑话网</a>
<a href="http://www.sogo.com">sogo网</a>
<input type="text">
</body>

Pseudo-element selector

first-letter

常用的给首字母设置特殊样式
p:first-letter {
  font-size: 48px;
  color: red;
}

before

在每个<p>元素之前插入内容
p:before {
  content:"*";
  color:red;
}

after

在每个<p>元素之后插入内容
p:after {
  content:"[?]";
  color:blue;
}

Selector priority

Same selector, the introduction of different ways: proceeds principle, the label who is in charge who is close to
a different selector, the same manner of introduction: inline styles> id selector> class selector> tag selector

Label Style

The basic style

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

length

px: pixels (Pixel), a minimum unit displayed on the screen for web design, easy and intuitive
mm: mm
cm: cm
in: inches
pt: Point (Point), a unit of length, 1pt = 1 / 72in, for the printing industry, very simple to use;
em: considerable length, usually 1em = 16px, applied to the flow distribution

colour

red; direct write English words
() Rgb: three values may be [0-255] value or a percentage, apart (r: Red g: Green b: Blue)
rgba (): The first three pixel values or percentages, the last transparency [0, 1] value to apart (r: Red g: Green b: Blue a: Alpha)
hsl (): The first value is [0,360] values, the two values may be a percentage, apart (h: Hue s: Saturation l: Lightness)
hsla (): The first value is [0,360] value, the intermediate value may be a percentage of the two, the last one of [0, 1] value to apart (h: Hue s: Saturation l: Lightness a: Alpha)
#AABBCC: six hexadecimal digits, each two a whole, representing the Red, Green, Blue, can be abbreviated #abc

Common styles

Font style

font-family: font family, multi-value for standby to, spaced

font-family: "STSong", "Arial";

font-size: Font Size
font-style: font styles normal, italic, oblique
font-weight: Font weight normal, bold, lighter, 100 ~ 900
line-height: Row Height
font: word size Style weight / high word line group

Text Style

color: Text Color
text-align: laterally aligned

left 居左 、center 居中 、right 居右、justify 两端对齐

vertical-align: longitudinally aligned

baseline：将支持valign特性的对象的内容与基线对齐 
sub：垂直对齐文本的下标 
super：垂直对齐文本的上标 
top：将支持valign特性的对象的内容与对象顶端对齐 
text-top：将支持valign特性的对象的文本与对象顶端对齐 
middle：将支持valign特性的对象的内容与对象中部对齐 
bottom：将支持valign特性的对象的文本与对象底端对齐 
text-bottom：将支持valign特性的对象的文本与对象底端对齐

text-indent: reduce font

p{
    text-indent: 48px;
}

text-decoration: word scribing

underline：下划线、overline：上划线、line-through：中划线、none：没有划线、inherit：承父元素的text-decoration属性的值

letter-spacing: word spacing
word-spacing: word spacing
word-break: Wrap

normal：默认换行规则
break-all：允许在单词内换行

Background Style

background-color: color

background-color: green;

background-image: pictures by opacity: (0-1) to control transparency

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

background-repeat: repeat

background-repeat: no-repeat;
repeat(重复)、 no-repeat(不重复) 、repeat-x(X轴重复) 、repeat-y(Y轴重复)

background-position: positioning

background-position: center;
top、bottom、left、right 、center

background-attachment: scroll mode

scroll、fixed

It can be written together:

background: no-repeat center url("bg.png") blue ;

frame

border-width: Border width

border-width: 3px;

border-style: type of border

none: 默认无边框、dotted: 点线框、dashed: 虚线框、solid: 实线边界、double: 两个边界、groove: 3D沟槽边界、ridge: 3D脊边界

border-color: border color

border-color:
transparent：透明

Set a single style for a border

{
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-style: on the right lower left; to set different borders

属性可以有1-4个值
border-style:dotted solid double dashed;

It can be written together:

border: 3px solid red;

border-radius: arc angle border

div {
    width: 400px;
    height: 400px;
    background-color: red;
    border: 3px solid black;
    border-radius: 50%;
        }

The new border properties

Attributes	Explanation
border-image	Set all properties border of the image.
border-radius	For setting all four borders - * - radius Properties
box-shadow	Addition of one or more drop-down box shadows

dispaly property

HTML elements for controlling the display.

value	significance
display:“none”	HTML document element exists, but does not display in the browser. JavaScript code typically used for mating.
display:“block”	Default occupies the entire width of the page, if you specify the width of the set, with the margin remaining part will be filled.
display:“inline”	Press display inline elements, then re-set the element's width, height, margin-top, margin-bottom and float property will not be affected.
display:“inline-block”	At the same time that the element has the characteristics of inline elements and block-level elements.

display: "none" and visibility: hidden differences:

visibility: hidden: hide an element, but hidden element still occupies the same space previously not hidden. In other words, although the element is hidden, but still affects layout.

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。