CSS (Cascading Style Sheets) Cascading Style Sheets
Pertaining to the style of HTML tags
CSS comments
In general, CSS is a separate file, because of its content is modified HTML tag style, in order to facilitate maintenance and modification of late, so we use artificial Explanatory notes for the modification of the current style is what the
单行注释：/*注释文本*/
多行注释：就是在单行注释中换行即可
/*
注释1
注释2
*/
养成习惯
/*这是首页的css样式文件（说明css文件的作用）*/
/*页面通用样式*/
/*顶部导航条样式*/
/*侧边菜单栏样式*/CSS syntax structure
选择器名 {
属性名:属性值;
属性值1:属性值1;
……
属性值n:属性值n
}CSS introduced three kinds of ways
1. External CSS files (standard usage)
<!--1.外部CSS文件(标准使用方式)-->
<link rel="stylesheet" href="myfirstcss.css">2. Write CSS code in the head tag using the style tag
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<!--2.在head标签使用style标签书协CSS代码-->
<style>
P {
color: indianred;
}
</style>
</head>3. The internal tag by the writing style properties directly corresponding to the pattern (not recommended)
<div>
<p style="color: aqua;">君不见,黄河之水天上来,奔流到海不复回</p>
<p>君不见,高堂明镜悲白发,朝如青丝暮成雪</p>
</div>Priority for these three
Internal tag style attribute> (head style tag label> link tag redistribute)
ps: head label style tags and labels incorporated link in terms of execution order of priority between the external view HTML, execution of the last high priority
CSS styles are divided into two steps:
1. Find the label to be modified
2. Set the modified content
CSS selectors
Basic selector: selector element, ID selector, class selector, universal selector (not recommended)
- Tag selector
The most common CSS selectors are tag selector. In other words, the label of the document is the most basic selectors. The selector will usually be some HTML tags, such as p, h1, div, a, may be even html itself
/*将P标签中的文本颜色设置成deepskyblue*/
p {
color: deepskyblue;
}- ID selector
ID refers to the ID naming convention name tags, the ID selector, it is necessary to #begin with, plus the ID name tag
<!--此处是html文件-->
<p id="text">君不见,高堂明镜悲白发,朝如青丝暮成雪</p>/*此处是css文件*/
/*将id名称为text的元素中的字体加粗*/
#text {
font-weight:bold;
}- Class selector
Class selector allows the tag to an independent way to specify the style. Class selector may be used alone or can be combined with other labels. Naming convention, to .begin with, plus the name of the class
<!--此处是html文件-->
<div>
<p class="c1">Life is short,you need python</p>
<h1 class="c1">The test was very difficult</h1>
</div>/*此处是css文件*/
/*将class="c1"的元素中的文本颜色设置成chocolate*/
.c1 {
color: chocolate;
}ps: class name is not recommended to start with a number, some browsers are not compatible; the current label has multiple class attributes, separated by spaces
- Universal selector, with
*representation showing the entire HTML page with all the style
* {
color:purple;
}Combined selector: descendant selectors, the son of selectors, adjacent selectors, brother selector
- Descendant selectors
Descendant selectors include selectors also called, an internal label all the labels (including cascade label) for modification
<!--此处是html文件-->
<div>
<div>
<!--该p标签的文本颜色是红色-->
<p>Life is short,you need python</p>
</div>
<!--该p标签的文本颜色是红色-->
<p>The test was very difficult</p>
</div>
<p>People can gain knowledge through reading books</p>/*此处是css文件*/
/*将div标签内部中所有p标签的文本设置为红色*/
div p{
color:red;
}- Son selector
Son selector, also known as sub-element selector, compared with descendant selectors, son selector can only select a sub-tab of the label.
When we do not want to modify any of the descendants of the label, but to narrow the range, select only a sub-label label, you can use the selector son
<!--此处是html文件-->
<div>
<div>
<p>Life is short,you need python</p>
</div>
<!--该p标签的文本颜色是蓝色-->
<p>The test was very difficult</p>
</div>
<p>People can gain knowledge through reading books</p>/*此处是css文件*/
/*将div标签的子标签p标签的文本设置为blue*/
div p{
color:blue;
}- Nearby selector
Immediately after selecting the current label tag, and both have the same parent tag
<!--此处是html文件-->
<div>
<div>
<p>Life is short,you need python</p>
</div>
<!--该p标签的文本颜色是绿色-->
<p>The test was very difficult</p>
</div>
<!--该p标签的文本颜色是绿色-->
<p>People can gain knowledge through reading books</p>/*此处是css文件*/
/*紧急接在div标签后，并跟该div标签具有同一个父标签的p标签的文本颜色为绿色*/
div+p {
color:green;
}- Brother selector
Modifications immediately after the current label, and with all the current label label styles at the same level
<!--此处是html文件-->
<div>
<p>The test was so easy</p>
<div>
<p>Life is short,you need python</p>
</div>
<!--该p标签的文本颜色是aquamarine-->
<p>The test was very difficult</p>
<!--该p标签的文本颜色是aquamarine-->
<p>good good study，day day up</p>
</div>
<div>
<p>People can gain knowledge through reading books</p>
</div>/*此处是css文件*/
/*在div标签后且在同一级的p标签的文本颜色设置为aquamarine*/
div ~ p {
color: aquamarine;
}Attribute selectors
Modified all tags have an attribute name
<!--此处是html文件-->
<div>
<!--该p标签的文本颜色是coral，字体大小为12px-->
<p today="thursday">The test was so easy</p>
<div>
<!--该p标签的文本颜色是coral，字体大小为12px-->
<p today="monday">Life is short,you need python</p>
</div>
<!--该span标签的文本颜色是coral，字体大小为12px-->
<span today="friday">The test was very difficult</span>
<!--该p标签的背景颜色是aquamarine，文本颜色是chocolate，字体大小为20px-->
<p today="friday">Life is short,you need python</p>
</div>
<div>
<!--该p标签的文本颜色是white，背景颜色为lightskyblue，字体大小为12px-->
<p today="sunday">People can gain knowledge through reading books</p>
</div>/*具有today属性的标签文本字体设置为12px，文本颜色设置为coral*/
[today] {
font-size: 12px;
color: coral;
}
/*具有today属性并且属性值叫sunday的标签背景颜色设置为lightskyblue，文本颜色设置为white*/
[today="sunday"] {
background-color: lightskyblue;
color: white;
}
/*具有today属性并且属性值叫friday的p标签背景颜色设置为aquamarine，文本颜色设置为chocolate,字体大小设置成20px*/
p[today="friday"] {
background-color: aquamarine;
color: chocolate;
font-size: 20px;
}