CSS is short for Cascading Style Sheets and is sometimes called CSS Style Sheets or Cascading Style Sheets.
CSS is a markup language used to set the text content in HTML pages, the appearance of pictures, and the layout and appearance display styles of the layout. The appearance of HTML can be beautified, and the page looks more concise and beautiful (HTML is the presentation of structure, and css is the realization of style).
CSS consists of two parts: selectors and one or more declarations.
grammar:
<style>
selector {style}
To whom to change {change to what}
<style>
For example:
<style>
p {
color:red;
}
</style>(1) The selector is used to specify the HTML tag, and the curly braces are the specific form of the object setting
(2) Attributes and attribute positions are separated by English ":"
(3) Multiple key-value pairs are separated by English ";"
CSS code style
1. Style format
In general, it is mostly used for expansion type patterns.
As follows:
<style>
p {
color:red;
font-size:13px;
}
</style>2. Style capitalization
Use all lowercase letters, except in special cases.
3. Space specification
(1) A space needs to be saved before the attribute value and after the colon
(2) Leave a space between the selector and the braces
The role of CSS selectors
Select different labels according to different needs
Classification of selectors:
Selectors are divided into two categories: basic selectors and composite selectors
A base selector is composed of a single selector
Basic selectors include: label selector, class selector, id selector and wildcard selector
Tag selector (sort by tag name)
Format:
tagname {
Attribute 1: attribute value 1;
Attribute 2: attribute value 2;
........................
}
For example: the following code turns the h4 title into purple
<style>
h4 {
color: blueviolet;
}
</style>
class selector:
You can select a single label or multiple labels corresponding to the table
Grammar format:
.className {
Attribute 1: attribute value 1;
Attribute 2: attribute value 2;
}
The form applied in the HTML structure is as follows:
<li class="类名称"> 内容 </li>
The class attribute needs to be called in the structure to call the related class class
Style point definition, structure class (class) call, one or more commonly used in development.
Notice:
(1) The class selector uses "." (English form) for identification, followed by the class name (custom)
(2) It can be understood as giving the label a name to indicate
(3) Long names or phrases can use horizontal lines to name selectors
(4) Do not use pure numbers, Chinese names, etc., use English letters as much as possible
(5) The naming should be meaningful, try to make it possible for people who read the code to see and understand what is being written below
(6) The naming format specification still needs to be followed
A single class name is used as follows:
<style>
.bule {
color: blueviolet;
}
</style>
<h4 class="bule">让我们在山的顶峰相遇吧</h4>The result after running is shown in the figure below, only one of the h4 tags is changed in color:
Multiple class names: (one tag can use multiple class names)
The usage is as follows:
<li class="red size">内容</li?
(1) In the class attribute of the debt tag, multiple class names can be written with spaces to separate them
(2) This tag can have the form of these class names respectively
Scenarios for using multiple class names:
(1) You can put the same style of some label elements into one class
(2) These tags can call this public class, and then call the unique class
(3) It saves CSS space and makes it easy to modify the overall format
The use of multiple class names is shown in the following code:
<style>
.bule {
color: blueviolet;
}
.size {
font-size: 20px;
}
</style>
<p class="size bule">千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p>
<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p class="size">此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>The result of the operation is that one of the texts is changed in both color and size, while a text field is only changed in size without changing its color. The result of the operation is shown in the figure below:
id selector:
HTML elements use the id attribute to set the selector, and the id in CSS is defined with "#"
grammar:
<style>
#id {
color:....;
background-color:....;
.............;
}
</style>The specific usage methods are as follows:
<style>
#nav {
color:pink;
font-size=12px;
}
</style>
<body>
<div id="nav">内容</div>
</body>The code looks like this:
<style>
.bule {
color: blueviolet;
}
.size {
font-size: 20px;
}
#color {
color:red;
}
</style>
<p class="size bule">千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p>
<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p class="size">此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p id="color"> 单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。
</p>
color This id selector can only be used once
Style #definition, structure id call, can only be called once, once called, other tags cannot be called
The difference between and class:
(1) The class is equivalent to the name of a person and can be reused
(2) id is equivalent to a person's ID card number, and a person can only have one
Wildcard selector:
Defined with "*", it means to select all elements (labels) in the page
grammar:
<style>
* {
color:sky blue;
}
</style>Wildcard selectors do not need to be called, automatically format all elements, and are only used in special cases.
Example: Clear inner and outer margins
* {
margin:0;
padding:0;
}The code to change the color of all text is as follows:
<style>
* {
color:aquamarine;
}
</style>
CSS font properties:
The CSS Font (font) property is used to define the font family, size, weight and text style (such as italic)
Font family :
CSS uses the font-family property to define the font family of text
(1) English commas must be used to separate various fonts
(2) Under normal circumstances, if there are multiple words separated by spaces, add quotation marks
(3) Try to use the fonts that come with the system to ensure that it can be displayed normally at each user
(4) The most common fonts: Microsoft YaHei, tahoma, arial, Hiagino Sans
If a font-family has multiple fonts, first check whether the first font exists in the system, if it exists, apply the first one, and if it does not exist, look backwards for the existing fonts in turn.
The way to use it is as follows:
<style>
p {
font-family="Microsoft YaHei"、"tahoma,arial"、"Hiagino Sans"
}
</style>
font size:
CSS uses font-size to define font size
p {
font_size:20px;
}(1) px (pixel) size is the most commonly used unit for our web pages
(2) The default font size of Google Chrome is 16px
(3) Different browsers may display different font sizes by default. We try to give a clear value and do not default to the size
(4) You can specify the size of the entire page text for the body
Titles and labels are special, and the text size needs to be specified separately
Font thickness: (write numbers directly without adding pixel value px)
Use the font-weight property to set the weight of the font
parameter:
| normal | The normal default font is equivalent to number=400 |
| bold | bold. Equivalent to number=700 |
| bolder | extra bold, IE5+ |
| lighter | LE5+ thin body |
| number | The thickness of the font can be adjusted directly by following the number |
text style
Use font-style to set the style of the text
p {
font-style:normal;
}The attribute value contains the italic italic style, the main function is to make the oblique font no longer italic
Font composite properties:
The font attribute can combine the above text styles, which can save the length of the code.
The form is as follows:
body {
font: font-style font-weight font-size/line-height font-family
}
Among them, font-size and font-family must be written, otherwise it will not be executed normally.
body { font: italic 700 16px 'microsoft yahe'}Change the code of the body to the p tag, and the running result is as follows:
(1) When using the font attribute, the order must be written in accordance with the above grammatical format and cannot be changed, and spaces are used to separate each attribute
(2) The properties that do not need to be set can be ignored directly (that is, take the default value), but the font-size and font-family properties must be retained, otherwise the font will not work
text attribute
The css text (text) attribute can define the appearance of the text, such as color, alignment text, decoration text, text indentation, line spacing and so on.
text color ( color )
The color attribute is used to define the color of the text
div {
color:red;
}
| Representation | attribute value |
| RGB code | rgb(255,0,0) or rgb(100%,0%,0%) |
| predefined colors | red,green,bule,pink |
| hexadecimal | #FF0000,#FF6600,#29D794 |
Commonly used hexadecimal in development
Align text ( text-align )
The text-align attribute is used to set the horizontal alignment of the text content within the element
For example:
div {
text-align:center;
}| left | align left (default) |
| center | center alignment |
| right | right align |
To give an example, the code is as follows (align a text in the center):
<style>
.align {
text-align: center;
}
</style>
<body>
<h4 class="align">让我们在山的顶峰相遇吧</h4>
<h4 class="align"> 一起去吧，更远的地方</h4>
</body>The result of running the code is shown in the figure:
Decorate text ( text-decoration )
The text-decoration attribute specifies the decoration to add to the text, you can underline, strikethrough, overline, etc. the text.
div {
text-decoration:underline;
}
The attribute values are shown in the table below:
| attribute value | describe |
| none | The default is no decoration (you can make the underlined not exist) |
| underline | Underline, link a comes with an underline |
| overline | Overline (almost never used) |
| line-through | strikethrough (not commonly used) |
To give an example, remove the underline of link a as shown below, the code is as follows:
<style>
a {
text-decoration: none;
}
</style>
<body>
<a href="https://baike.baidu.com/item/%E5%AF%B9%E8%A7%92%E5%B7%B7%E4%B9%90%E9%98%9F/23659863?fr=aladdin" target="_blank">
<h1>对角巷乐队</h1>
</a>
</body>The result of the operation is shown in the figure below:
Text indentation ( text-indent )
The text-indent attribute is used to specify the indentation of the first line of text, usually the first line of a paragraph
div {
text-indent: 20px;
}
Usually set this property, the first line of all elements can be indented to a given length, even the length can be a negative value
p {
text-indent:2em;
}
Em is a relative unit, which is the distance of a text size of the current element. If the current element does not have a size set, it will follow the text size of the parent element.
Generally, em is used to set indentation, it only indents a few words, which is very convenient for developers
We have already learned this part, so let's do an operation to indent all paragraphs, the code is as follows:
<style>
p {
text-indent: 2em;
}
</style>
<body>
<p>千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p>
<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p> 单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。
</p>
</body>The result after running is as follows:
line spacing ( line-height )
The line-height attribute is used to set the distance between lines (row height)
p {
line-height:26px;
}
CSS import method
Internal stylesheet:
The internal style sheet is written inside the HTML page, which extracts all the css code and puts it into a <style> tag separately
<style>
div {
color:red;
font-size:19px;
}
</style>
(1) The <style> tag can be placed anywhere in the html document, but it is generally placed in the <head> tag
(2) In this way, it is convenient to control the element style settings in the current entire page
(3) The code structure is clear, but the structure and style are not completely separated
(4) Use internal style settings, also known as embedded imports
inline style sheet
The inline style sheet (inline style sheet) is to set the css style in the style attribute inside the element tag
<div style="color :red; font-size:19px}内容</div>
(1) style is actually the attribute of the label
(2) In the middle of the double quotes, the writing method must conform to the css specification
(3) You can control the current label to set the desired style
external style sheet
In actual development, the core of the external style sheet is to write it into the css file separately, and then introduce the css into the html document
The introduction is divided into two steps :
(1) Create a new style file with the suffix .css, and put all the css code into this file
(2) In the html page, use the <link> tag to import this file
The format is as follows:
<link rel = "stylesheet" href = "css file path">
| Attributes | effect |
| rel | Define the relationship between the current document and the linked document, here it needs to be specified as stylesheet, indicating that the linked document is a style sheet |
| href | Define the URL of the linked external style sheet file, which can be a relative/absolute path |
Use external style sheets to set css, also known as external chains and chained imports
The <link> tag is written in the <head> tag
chrome debugging tools
(1) Ctrl+ wheel can zoom in and place small codes
(2) The left side is html, the right side is css
(3) The right css can change the value and view the color
(4) Ctrl+O restore browser size
(5) Click on the element and find that there is no style import on the right side, it is very likely that the class name or style import is wrong
(6) If there is a yellow exclamation mark in front of the monocular vision of the style, it means that the style is written incorrectly
Emmet grammar
Quickly generate html structure syntax
(1) To generate a label, directly enter the label name and press the tab key
(2) If you want to generate multiple identical tags, add *
div*3 can generate three div tags
(3) If there is a parent-child relationship label, you can use >
ul>li means that li is a subtag of ul
(4) If there is a label of brotherhood, just use +
div+p
(5) If you generate a class name or id name, just write .demo or #two and press the tab key
(6) If the generated div class names are in order, you can use the auto-increment character ￥
(7) If you want to write content inside the generated tag, write the content in { }
例 .nav <div class="nav"> </div>
#na <div id = "na" > </div>
p.nav is to process the label p
.demo$*5 has five labels with class 1, 2, 3, 4, and 5 in the div
div {content}*n has n div+content
Quickly generate css style syntax
css basically takes the form of abbreviation
(1) For example, w200+tab is width: 200px;
(2) For example, lh26+tab is line-height: 26px;
compound selector
descendant selector
The descendant selector is also known as the containment selector, which can select the child elements in the parent element. It is written as follows (write the outer label in front. Write the inner label in the back and separate it with spaces)
grammar:
Element 1 Element 2 {style declaration}
Indicates to select all elements 2 in element 1 (element 2 is a descendant element of element 1)
For example:
ul li {style declaration} selects all li tags in the ul tag
(1) Element 1 and element 2 are separated by spaces
(2) Element 1 is the parent, and element 2 is the child. The final selected element is element 2
(3) Element 2 can be a son or a grandson, as long as it is a descendant of element 1
For example:
.nav li a{color:red;} Find the label a of li in the class nav
The specific application method is as follows:
<style>
.nav li a{
color:red;
}
</style>
<body>
<ul class="nav">
<li>
<a href="#">我好想爱这个世界啊！！</a>
我好想爱这个世界啊！！
</li>
</ul>
</body>The result of the operation is as follows, only the a link tag in the li tag in the reference nav is changed in color:
child selector
Child selectors can only be used as the closest child element of an element. The simple understanding is to choose the parent-son element
grammar:
element1 > element2 {style declaration}
Indicates to select all direct descendant elements 2 in element 1
For example:
<div>
<p> 变 </p>
<p>变</p>
<ul>
<p>No change</p>
</ul>
</div>
(1) Element 1 and element 2 are separated by a greater than sign
(2) Element 1 is the parent, element 2 is the child, and the final selected element is element 2
(3) Element 2 must be his own son, and the others are not allowed
For example the following code:
<style>
div > p {
color:blueviolet;
text-align:center;
}
</style>
<div>
<p>
把我的明天都献给黑夜吧！
</p>
<ul>
<p>
把我的爱都献给你吧！！
</p>
</ul>
</div>The result of the operation is shown in the figure below:
union selector
A union selector can select multiple sets of tags while defining the same style for them. usually used in collective statements
The union selector is a selector pass, separated connection, any form of selector can be used as part of the union selector
grammar:
element1, element2, element3{style declaration}
Indicates that element 1, element 2, and element 3 are selected
(1) Elements are separated by commas
(2) The comma can be understood as and
The union selector likes to write vertically, and the last selector does not add a comma
Perform an instance operation, the code is as follows:
<style>
p,a,h4 {
color:blueviolet;
text-align:center;
text-decoration: none;
}
</style>
<a href="https://baike.baidu.com/item/%E5%AF%B9%E8%A7%92%E5%B7%B7%E4%B9%90%E9%98%9F/23659863?fr=aladdin" target="_blank">
<h1>对角巷乐队</h1>
</a>
<p>6月12日，太合音乐集团旗下“在水星”厂牌服务艺人对角巷乐队全新单曲《我们》正式上线，这是他们继单曲《Hold You Tight》发行之后的又一温暖治愈系音乐作品。 如果说《Hold You
Tight》想表达的是只属于某一个人的专属情歌，那这首《我们》则是送给每一个努力生活的人。</p>
<img src="2.jpeg" height="650" width="1000" title="对角巷新专辑">
<h4> 一起去吧，更远的地方</h4>
The running result is shown in the figure below:
The Diagon Alley title was supposed to be a link and should be underlined, but it was removed in the style statement
Pseudo class selector:
Pseudo-class selectors are used to add special effects to a selector
The biggest feature of pseudo-class writing is that it is represented by a colon (:)
Link pseudo-class:
| a:link | Select all unvisited |
| a:visited |
Select already visited |
| a:hover | Select the mouse pointer on the |
| a:active | Select the long press of the mouse that has not yet popped up |
Link pseudo-class notes:
(1) In order to ensure the effect, please write in the order of link, visited, hover, active
Memory formula: LV bag is really good
(2) Because a link has a default style in the browser, it is necessary to specify a style for the link in actual work
The actual development of writing:
a {
color:gray;
}
a:hover {
color:skybule;
}
The code for an example is as follows:
<style>
a {
color:gray;
}
a:hover {
color:blueviolet;
}
</style>
<a href="对角巷.html" target="_balnk">在日月的璀璨间闪耀</a>The result of the operation is shown in the figure below. When the mouse is placed on the link, the color will change:
:focus pseudo-class selector
The :focus pseudo-class is used to select form (input) elements with a cursor
input:focus {
background-color:skybule;
}
Summary of compound selectors:
| Selector | effect | feature | Usage | Partition and its usage |
| descendant selector | used to select offspring | can be descendants | more | symbol space |
| child selector | Select the nearest level element | Only choose my own son | few | sign greater than |
| union selector | Choose the same style | for collective | many | comma |
| link pseudo-class | Choose a link with a different status | related to link | many | normal writing |
| ：focus | Get the cursor | related to the form | few | input：focus |
Today's main introduction is some basic grammar learning of css. The update is a bit slow. I hope everyone understands. At the end of the semester, I will review three math courses. I will continue to update new knowledge during the summer vacation!