css
**1. CSS style rules: ** selector {attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;}
2. Introduce CSS style sheet
- Inline style
Syntax format:
<tagname style="attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;"> content</ tag name> - Inline
syntax format:
<head>
<style type="text/css">
selector {attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;}
</style>
</ head> - Link-in
syntax format:
<head>
<link href="path to CSS file" type="text/css" rel="stylesheet" />
</head>
3. Basic
CSS selectors To apply CSS styles to specific HTML elements, you first need to find the target element. In CSS, the part of the style rule that performs this task is called a selector.
| Tag selector | Tagname {attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;} |
|---|---|
| Class selector | .Class name {attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;} |
| id selector | #id名{attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;} |
| Wildcard selector | *{Attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;} |
- Selector example
| Selector example | Example description |
|---|---|
| a:link | Select all unvisited links |
| a:visited | Select all visited links |
| a:active | Select event link |
| a:hover | When the mouse is selected on the link |
How to solve the problem that the hover style does not appear after the hyperlink is visited?
It should be placed in accordance with the "love and hate guidelines" link, visited, hover, and active.
Four. CSS font style attributes
| Attributes | use |
|---|---|
| font-size | Used to set font size |
| font-family | Used to set font style |
| font-weight | Used to define the thickness of the font |
| font-variant | Used to set variants (define small capital letters) |
| font-style | Used to define the font style (such as setting italic, italic) |
| font | Used to comprehensively set the font style |
- Eliminate floating three lines of code
Used in big box
.clearfix::after {
/*方法一（对父元素应用after伪对象生产式）*/
content: "";
display: block;/*表示显示模式，变为块级元素。display: none 表示隐藏*/
clear: both;/*清除样式*/
}
.clearfix{
/*方法二,都一样用在父元素*/
overflow:hidden;/*清除浮动，隐藏溢出*/
}
If the floating element wants to be centered, it must be positioned relatively
V. CSS text appearance properties
| Attributes | use |
|---|---|
| color | Used to define the color of the text |
| letter-spacing | Used to define the word spacing, the so-called word spacing is the space between characters |
| word-spacing | Used to define the spacing between English words, invalid for Chinese characters |
| line-height | It is used to set the line spacing, which is the distance between lines, that is, the vertical spacing of characters (unit pixel px) |
| text-align | Set the horizontal alignment of the text content, which is equivalent to the align attribute in html |
| text-transform | Control the case of English characters |
| text-decoration | Set the text underline, overline, strikethrough and other decorative effects |
| text-indent | Set the indentation of the first line of text |
| white-space | Set the handling of whitespace |
| background-color | Define the background color |
| margin:0 auto | Achieve horizontal centering of block elements |
| opacity:0.5 | Achieve translucency |
- Introduction to the attributes of display Introduction to the
three attributes of display
| Attributes | effect |
|---|---|
| display:none | Hide this element |
| display:block | Show this element and turn it into a block-level element |
| display:inline | Make the element into an inline element |
| display:inline-block | Become a block-level element that does not occupy a single line |
- Border properties
| Style attributes | Common attribute values |
|---|---|
| Border style: border-style: | none (default), solid single solid line, dashed dotted line, dotted dotted line, double double solid line |
| Border width: border-width: | Pixel values |
| 边框颜色：border-color: | 颜色值 |
| 边框圆角border-radius: | 像素值 |
| 综合设置边框：border:四边宽度 四边样式 四边颜色; |
为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距。
*{
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
}
- 背景属性
在CSS中，不仅可以将网页元素的背景设置为某一种颜色，还可以将图像作为网页元素的背景，通过background-image属性实现。
background-image :背景颜色属性
如下代码：
body
{
background-color:#CCC;
background-image:url(images/jianbian.jpg);
}
默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。
| 元素 | 属性 |
|---|---|
| background-repeat | 图像平铺属性 |
| background-position | 图像位置属性 |
| background-attachment | 图像固定属性 |
六.定位position
| static | 静态定位（不定位） |
| relative | 相对定位（用于父元素） |
| absolute | 绝对定位 （用于子元素） |
| fixed | 固定定位 |
（父相子绝）
设置块元素居中
div{
left:50%;
top:50%;
}
-
可以通过四个CSS属性对设置其位置：
- left
- right
- top
- bottom -
定位下的居中
某个方向居中：
1.定宽（高）
2.将左右（上下）距离设置为0
3.将左右（上下）margin设置为auto
如想要左右居中则设置left:0，right:0；再设置margin:0;
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间 -
绝对定位 absolute
相对定位与绝对定位是合在一起的（父相子绝）相对
相对定位做绝对定位的包含块
就是说绝对定位的上一级的块要定义relative
脱离原来的位置进行定位(别的元素直接填充进去)
最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位 -
固定定位 fixed
其他情况和绝对定位完全一样。
包含块不同：固定为视口（浏览器的可视窗口）
相对于整个页面居中（上下拉也不会改变位置） -
相对定位 relative
保留原来位置进行定位
相对于自己原来的位置进行定位 -
补充
绝对定位、固定定位元素一定是块盒
绝对定位、固定定位元素一定不是浮动
没有外边距合并