Article Directory
Basic use of CSS
One, CSS introduction
The full name of CSS is: Cascading Style Sheets, which means cascading style sheets, which complement HTML to realize the layout and style beautification of web pages
2. How to use CSS
1. Inline style/inline style
With the help of the style tag attribute, add a style declaration to the current element
<标签名 style="样式声明">
CSS style declaration: It consists of CSS properties and values.
Example:
style="属性:值;属性:值;"
Common CSS properties:
- Set the text color color: red;
- Set the background color background-color: green;
- Set the font size font-size: 32px;
2. Inline style
With the help of style tags, embedding CSS style codes in HTML documents can realize the separation between CSS styles and HTML tags. At the same time, you need to use CSS selectors to match elements in HTML and apply styles.
Example:
<style>
选择器{
属性:值;
属性:值;
}
</style>
Selector: Select corresponding elements on the page by tag name or some attribute values, and apply styles to them.
Example:
/*标签选择器 : 根据标签名匹配所有的该元素*/
p{
color:red;
}
3. External link style sheet
- Create an external style sheet file suffix using .css
- Use tags to introduce external style sheets in HTML files
<link rel="stylesheet" href="URL" type="text/css">
- Apply styles to matching elements in the style sheet file with the help of selectors
Three, style sheet characteristics
1. Stackability
Multiple sets of CSS styles work together on one element
2. Inheritance
Descendant elements can inherit certain styles in ancestor elements.
Example: Most text attributes can be inherited
3. Priority of style sheets
Priority is used to resolve style conflicts. The same style (for example, text color) of the same element is set multiple times in different places. Which style is finally selected? Which style sheet has a higher priority at this time?
- In-line styles have the highest priority
- Document embedded and external link style sheets, the priority is the same, depending on the code writing order, latecomers are the top
- Browser default styles and inherited styles have lower priority
Four, CSS selector
1. Function
Match certain elements in the document to apply styles
2. Classification:
1. Tag selector
Match all the elements in the document according to the tag name
Syntax:
标签名{
属性:值;
}
2. id selector
Match the unique element in the document according to the id attribute value of the element. The id is unique and cannot be reused.
Syntax:
#id属性值{
}
Note: The
id attribute value can be customized. It can be composed of numbers, letters, underscores, and -, and cannot start with a number;
try to understand the name as possible. When multiple words are composed, you can use hyphens, underscores, and small camels to indicate
3. class selector/class selector
According to the class attribute value of the element to match the corresponding element, the class attribute value can be reused to realize the reuse of the
style.Syntax:
.class属性值 {
}
Special usage:
1. 类选择器与其他选择器结合使用
注意标签与类选择器结合时,标签在前,类选择器在后
例 : a.c1{ }
2. class属性值可以写多个,共同应用类选择器的样式
例 :
.c1{ }
.c2{ }
<p class="c1 c2"></p>
4. Group selector
Set the style uniformly for a group of elements
Syntax:
selector1,selector2,selector3{
}
5. Descendant selector
Match all descendant elements (including direct and indirect child elements) that satisfy the selector
syntax:
selector1 selector2{
}
Match all descendant elements in selector1 that satisfy selector2
6. Child selector
Match all direct child elements that satisfy the selector
Syntax:
selector1>selector2{
}
7. Pseudo-class selector
Set styles for different states of the element, which must be combined with the basic selector.Classification
:
:link 超链接访问前的状态
:visited 超链接访问后的状态
:hover 鼠标滑过时的状态
:active 鼠标点按不抬起时的状态(激活)
:focus 焦点状态(文本框被编辑时就称为获取焦点)
Use:
a:link{
}
a:visited{
}
.c1:hover{
}
Note:
1. 超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写
:link
:visited
:hover
:active
2. 超链接常用设置 :
a{
/*统一设置超链接默认样式(不分状态)*/
}
a:hover{
/*鼠标滑过时改样式*/
}
3. Priority of the selector
Use selectors to set styles for elements. When a style conflict occurs, it mainly depends on the weight of the selector. The greater the weight, the higher the priority.
| Selector | Weights |
|---|---|
| Label selector | 1 |
| (Pseudo) class selector | 10 |
| id selector | 100 |
| Inline style | 1000 |
The final weight of complex selectors (descendants, children, pseudo-classes) is the sum of the weights of each selector. The weights of
group selectors are based on the individual weights of each selector, and no addition calculation is performed.
Example:
/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{
/*标签选择器权重为 1 */
color:red;
}
.c1 a{
/*当前组合选择器权重为 10+1 */
color:green;
}
#d1>.c2{
/*当前组合选择器权重为 100+10 */
color:blue;
}
Five, label classification and nesting
1. Block elements
Occupy a row alone, not in line with the element; you can manually set the width and height, and the default width is consistent with the parent element.
Example: body div h1~h6 p ul ol li form, table (the default size is determined by the content)
2. Elements in the line
Can be displayed in line with other elements; you cannot manually set the width and height, the size is determined by the content
Example: span label b strong isu sub sup a
3. Inline block elements
It can be displayed in line with other elements, and the width and height can be adjusted manually.
Example: img input button (form control)
4. The Nesting Principle
- Any type of element can be nested in a block element,
except for p elements, paragraph tags can only nest inline elements, not block elements - Inline elements are best to only nest inline or inline block elements
Six, size unit
- px pixel unit
- % Percentage, calculated with reference to the value of the corresponding attribute of the parent element
- em font size unit, calculated with reference to the font size of the parent element, 1em=16px
- Rem font size unit, calculated with reference to the font size of the root element, 1rem=16px
Seven, color unit
- English words: red, green, blue
- rgb(r,g,b) is represented by three primary colors, each color takes a value of 0~255
- rgba(r,g,b,alpha) The value of each of the three primary colors is 0 255, and the value of alpha is 0 (transparent) and 1 (opaque)
- Hexadecimal representation: prefixed with #, divided into long hexadecimal and short hexadecimal.
- Long hexadecimal system: each two digits are a group, representing a kind of three primary colors; the value range of each bit is 0 9, a f
Example: red rgb(255,0,0) #ff0000 - Short hexadecimal: It consists of 3 digits, each of which represents one of the three primary colors, and the browser will automatically expand each digit repeatedly, and still parse it according to the long hexadecimal system.
Example: #000 #fff #f00
- Long hexadecimal system: each two digits are a group, representing a kind of three primary colors; the value range of each bit is 0 9, a f
Eight, background attributes
1. Background color
background-color: red;
2. Background image related
1) Set the background image
background-image : url("路径");
Set the background image, specify the image path, if Chinese or spaces appear in the path, you need to add quotation marks
2) Set the repeat mode of the background image
The default background image is displayed from the upper left corner of the element. If the image size does not match the element size, the following situations will occur:
- If the element size is larger than the image size, it will automatically repeat the tile until it fills the entire element
- If the element size is smaller than the image size, the image is displayed from the upper left corner of the element by default, and the excess part is not visible
background-repeat:repeat/repeat-x/repeat-y/no-repeat
取值 ：
repeat 默认值，沿水平和垂直方向重复平铺
repeat-x 沿X轴重复平铺
repeat-y 沿Y轴重复平铺
no-repeat 不重复平铺
3) Set the display position of the background image
Displayed in the upper left corner of the element by default
background-position:x y;
Value method:
1. 像素值
设置背景图片的在元素坐标系中的起点坐标
2. 方位值
水平 ：left/center/right
垂直 ：top/center/bottom
注：如果只设置某一个方向的方位值，另外一个方向默认为center
3. 百分比
类似于方位值，根据百分比计算背景图片的显示坐标。
计算方式：
横坐标 = (元素宽度 - 背景图片宽度）* x%
纵坐标 = (元素高度 - 背景图片高度) * y %
特殊值：
0% 0% 左上角
100% 100% 右下
50% 50% 居中显示
Sprite image technology: In order to reduce network requests, all small icons can be spliced on a picture, and all the small icons can be obtained in one network request; with the help of background-position, the position of the background image can be adjusted to realize the display of different icons
4) Set the size of the background image
background-size:width height;
Value method:
1. 像素值
1. 500px 500px; 同时指定宽高
2. 500px; 指定宽度，高度自适应
2. 百分比
百分比参照元素的尺寸进行计算
1. 50% 50%; 根据元素宽高,分别计算图片的宽高
2. 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放
3. Shorthand for background attributes
background:color url("") repeat position;
- note:
- If you need to set the above attribute values at the same time, write in the corresponding order
- background-size set separately
Nine, text attributes
1. Font related
1) Set the font size
font-size:20px;
2) Set the font thickness
font-weight:normal;
- Value:
normal（默认值）等价于400
bold (加粗) 等价于700
3) Set italics
font-style:italic;
4) Set the font name
font-family:Arial,"黑体";
- Values:
1. You can specify multiple font names as alternative fonts, separated by commas
. 2. If the font name is Chinese or there are spaces in the name, quotes must be used.
Example:
font-family:Arial;
font-family:"黑体","Microsoft YaHei",Arial;
5) Shorthand for font attributes
font : style weight size family;
Note:
1. If all four attribute values must be set, write in strict order
2. size family is required
2. Text style
1) Text color
color:red;
2) Text decoration line
text-decoration:none;
Value:
underline 下划线
overline 上划线
line-through 删除线
none 取消装饰线
3) Horizontal alignment of text content
text-align:center;
Value:
left(默认值) 左对齐
center 居中对齐
right 右对齐
justify 两端对齐
4) Row height
line-height:30px;
Use: The
text is always vertically centered in the current line, and the vertical display position of the text in the element can be adjusted with the help of the line
height line-height = height Set a line of text to be vertically centered in the element
line-height> height The text moves down to display
line-height < height The text is displayed on the top.
Special:
line-height can be a unitless value, representing a multiple of the current font size, to calculate the line height
5) Shorthand for font property 2
font : size/line-height family;