[TOC]
CSS (on)
What is CSS?
CSS: Cascading Style Sheet, cascading style sheets. CSS role is to add a variety of styles HTML page tags, display the definition of a web page . To put it simply: CSS web page content and display style separation , improved display.
CSS benefits
- And that the data displayed separately
- Reduce network traffic
- The visual effect is consistent throughout the site
- The development efficiency improved (reduced coupling, a person responsible for writing html, a person responsible for writing css)
For example, there is a pattern to be displayed on one hundred pages, html if it is to realize that to write a hundred times, now have css, just write it again. Now, html only provide data and some controls, css entirely to provide a wide variety of styles.
CSS manner of introduction
Inline style
<p style="color: red">您好</p>
Internal Style
<style>
div{
color:red;
}
</style>
<!--我们的<style>标签要写在<body>的外面-->
<div>我就是这么强大</div>
eg: This is an example of the pycharm.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式</title>
<style>
div{
color:red;
}
</style>
<!--我们的<style>标签要写在<body>的外面-->
</head>
<body>
<div>我就是这么强大</div>
</body>
</html>
External style
External css style is to write in a separate file, and then introduced to the page. This method is recommended
<link rel="stylesheet" href="01.css">
eg:
01.css
div {
color: aqua;
}
css manner of introduction .html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入方式</title>
</head>
<body>
<link rel="stylesheet" href="01.css">
<div>我就是这么强大</div>
</body>
</html
Two characteristics of CSS
Succession
Set some properties to the parent, the child inherits the parent's property, which is inherited in our css.
Laminating properties
Major label covers right off the weight of a small label, whose weight is greater, the browser will show who attributes
CSS selectors
The basic selector
Element selector
You give that label top with style, you're at <style>which the label was like, but as long as get rid of this label will be the same page, and unified style applies to batch.
<style>
div{
color: blue;
}
</style>
<div>基本选择器</div>
ID selector
Set a specific style applied to a particular tag
<style>
#d2{
color: red;
}
/* # 代表的就是一个标签的ID*/
</style>
<div id="d2">ID选择器</div>
Class selector
Tag class attribute If you have more, use space-delimited, tab settings apply to certain styles
<style>
/*这个 . 就代表类*/
.c2{
color: red;
}
.c3{
color: blue;
}
.c4{
color: yellow;
}
/*我们可以对不同的类的属性的标签设置不同的颜色*/
</style>
<div class="c2">ID选择器2</div>
<div class="c3">ID选择器3</div>
<div class="c4">ID选择器4</div>
Combination selector
Combination selector
Used between a plurality of selectors comma separated. Indicate the selected page in multiple labels. Some common elements
<style>
.d2,p{
/* class="d2"的div标签和p标签都会变为红色*/
color: red;
}
</style>
<div class="d2">哈哈哈</div>
<p>p标签</p>
<div class="c">9098</div>
Descendant selectors
Use spaces indicate descendant selectors. As the name suggests, the offspring of the parent element (including the son, grandson, great-grandson)
<style>
div div{
color: red;
}
/*div标签里面的所有div后代都会变为红色*/
</style>
<div>我是你爸爸我真伟大
<div>我是儿子1</div>
<div>我是儿子2
<div>我是孙子</div>
</div>
</div>
Son selector
Use > represents progeny selector. For example div> p, merely represents the current div element selected descendant elements p.
<style>
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p{
color: red;
}
</style>
<div>我是你爸爸我真伟大
<div>我是儿子
<p>我是孙子</p>
</div>
</div>
Nearby selector
A plurality of selectors used between + spaced.
<style>
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p{
color: blueviolet;
}
</style>
<p>我是个p</p>
<div>我是你爸爸我真伟大</div>
<p>我也是个p</p>
Brothers selector
Used between a plurality of selectors ~ apart.
<style>
/*span后面所有的兄弟class="a"的标签*/
/*我也是个p这个标签不是span的兄弟，他就不会显示*/
span~.a{
color: blueviolet;
}
</style>
<div>
<span>哈哈哈</span>
<h1 class="a">标题1</h1>
<h2 class="a">标题2</h2>
<p>我是个p</p>
<h4 class="a">标题4</h4>
</div>
<p class="a">我也是个p</p>
More selectors
Attribute selectors
** tag with [Properties] * represents an element with a specified attribute is selected.
<style>
/*选取带有name属性的元素。*/
div[name]{
color: pink;
}
</style>
<div name="123">我的名字是123</div>
<div name="456">我的名字是456</div>
<div name="789">我的名字是789</div>
<style>
/*选取带有name="456"属性的元素。*/
div[name="456"]{
color: pink;
}
</style>
<div name="123">我的名字是123</div>
<div name="456">我的名字是456</div>
<div name="789">我的名字是789</div>
Universal selector
***** expressed using universal selector.
<style>
/*所有标签的颜色都会变为红色*/
*{
color:red;
}
</style>
<div>标签1</div>
<span>标签2</span>
<p>标签3</p>
Pseudo class selector
<style>
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
</style>
<a href="form表单.html">点我</a>
Pseudo-earth element selectors
first-letter
Initials commonly used to set a special style:
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每个<p>元素之前插入内容*/
p:before {
content:"哈哈哈";
color:red;
}
after
/*在每个<p>元素之后插入内容*/
p:after {
content:"哈哈哈";
color:blue;
}
before and after more than used to remove floating.
Priority selector
There are times when we could have set up multiple styles with a label, met overlapping set of items should we listen to one? Here we must use the priority selector.
Inline style 1000> id selector 100> class selector 10> tag selector 1> 0 Inherited Styles
CSS property-related (to know)
Width and height
width property may be provided an element width degrees.
height attribute element can be set to a high degree.
Block-level to set the label width, the width of the inline tag is determined by the contents
Fonts
Text font
font-family can take several font names as a "fallback" to save the system. If your browser does not support the first font, it tries the next one. The browser uses the first value it recognizes.
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
font size
p {
font-size: 14px;
}
If set to inherit represent inherit the parent element font size value.
Word weight (thickness)
font-weight is used to set the font of the word weight (thickness).
| value | description |
|---|---|
| normal | The default value, standard thickness |
| bold | Bold face |
| bolder | Thicker |
| lighter | thinner |
| 100~900 | Set specific thickness, 400 is equivalent to the normal, bold and is equivalent to 700 |
| inherit | Inherit the parent element font weight values |
Text Color
Color attribute is used to set the color of the text.
The color is most often specified by CSS:
- Hexadecimal values - such as: ** # ** FF0000
- An RGB value - such as: RGB (255,0,0)
- The names of colors - such as: red
There rgba (255,0,0,0.3), a fourth value of alpha, the designated color transparency / opacity, it is in the range of 0.0 to 1.0.
Text alignment
text-align attribute specifies the horizontal alignment of the text elements.
| value | description |
|---|---|
| left | The default value is left-aligned |
| right | Align Right |
| center | Align |
| justify | Justify |
Text Decoration
text-decoration attribute used to add special effects to text.
| value | description |
|---|---|
| none | default. Text defined criteria. |
| underline | The next line of text is defined. |
| overline | A text line definition. |
| line-through | Define a line passing through the text. |
| inherit | Text-decoration property inherited value of the parent element. |
Commonly used to remove a label from the default scribe:
a {
text-decoration: none;
}
First line indent
text-indent: 32px;
The first line of a paragraph indent 32 pixels:
p {
text-indent: 32px;