Home >Web Front-end >HTML Tutorial >Compilation of css knowledge points
Compilation of css knowledge points
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-08-23 09:03:421314browse
CSS is the abbreviation of Cascading Style Sheets, which is called cascading style sheets in Chinese. It is used to control the performance of web page data and can separate the performance of web pages from data content.
1. How to introduce css
1. Inline style: Inline style sets the CSS style in the style attribute of the mark. This method does not reflect the advantages of CSS and is not recommended.
2. Embedded: Embedded is to write CSS styles centrally in the tag pair of the tag pair of the web page. The format is as follows:
C. .. Write a CSS style here
3. Import type: Introduce an independent .css file into the HTML file. The import type uses CSS rules to introduce external CSS files. The
@import"mystyle.css"; Pay attention to the path of the .css file here
4. Link type: also introduce a .css file into the HTML file
Note: The import method will load the CSS file after the entire web page is loaded, so this leads to a problem. If the web page is relatively large, an unstyled page will appear first, and after a flash, the style of the web page will appear. This
It is an inherent flaw of import. The difference between using the link type and the import type is that it will load the CSS file before loading the main body of the web page file, so the displayed web page will have a style effect from the beginning. It will not be like the import type
Display the unstyled web page first, and then display the styled web page. This is the advantage of the link style.
2. CSS selector
The "selector" specifies the object of the "style" in {}, that is, which elements in the web page the "style" acts on
1. Basic selector:＊: Universal element selector, matches any element * ， E: Tag selector, match all elements P {color: green;}
.info and E.info: . E #Info and E#Info ID selectors, matching all ID attributes equal to FOOTER elements #info {background:#ff0;} p#info {background:#ff0;}
2. Combination selector:
E,F Multi-element selector, matching all E elements or F elements at the same time, separated by commas between E and F Div,p { color:#f00; }
E F Descendant element selector, matches all F elements that are descendants of the E element. E and F are separated by spaces #nav li { display:inline; } li a { font-weight:bold; }
E > F Child element selector, matches the child elements F of all E elements
E + F Adjacent element selector, matches all sibling elements F immediately following the E element注意嵌套规则：
- 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
- 块级元素不能放在p里面。
- 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 块级元素与块级元素并列、内联元素与内联元素并列。（错误的：）
3、属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值。
（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，
比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
p:before 在每个
元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个
元素的内容之前插入内容 p:after{ content:"hello"；color:red}
4、伪类选择器
伪类选择器： 专用于控制链接的显示效果，伪类选择器：
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
三、css常用属性
1、颜色属性
2. Font attributes
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
Old Boy
3. Background attributes
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat: full tile)
background-position: right top (20px 20px); (horizontal: left center right) (vertical: top center bottom)
Abbreviation:
Note: If you add the background attribute to the body, remember to add a height to the body, otherwise the result will be abnormal. This is because the body is empty and cannot support the background image. In addition, if you want to set a height at this time
Width=100px, you won’t see the effect unless you set html.
<span style="color: #008080;"> 1</span>
<span style="color: #008080;"> 2</span> "<span style="color: #800000;">en</span><span style="color: #800000;">"</span>>
<span style="color: #008080;"> 3</span>
<span style="color: #008080;"> 4</span> <meta charset="<span" style="color: #800000;">"<span style="color: #800000;">UTF-8</span><span style="color: #800000;">"</span>>
<span style="color: #008080;"> 5</span> <title>Title</title>
<span style="color: #008080;"> 6</span> <style>
<span style="color: #008080;"> 7 <span style="color: #000000;"> html{
<span style="color: #008080;"> 8 background-<span style="color: #000000;">color: antiquewhite;
<span style="color: #008080;"> 9
<span style="color: #008080;">10 <span style="color: #000000;"> }
<span style="color: #008080;">11 <span style="color: #000000;"> body{
<span style="color: #008080;">12 <span style="color: #000000;"> width: 100px;
<span style="color: #008080;">13 <span style="color: #000000;"> height: 600px;
<span style="color: #008080;">14 background-<span style="color: #000000;">color: deeppink;
<span style="color: #008080;">15 background-image: url(1<span style="color: #000000;">.jpg);
<span style="color: #008080;">16 background-repeat: no-<span style="color: #000000;">repeat;
<span style="color: #008080;">17 background-<span style="color: #000000;">position: center center;
<span style="color: #008080;">18 <span style="color: #000000;"> }
<span style="color: #008080;">19 </style>
<span style="color: #008080;">20</span>
<span style="color: #008080;">21</span>
4. Text attributes
white-space: Set how to handle white space in elements
- normal: Default processing method.
- pre: Keep spaces and do not wrap when the text exceeds the boundary
- nowrap: Do not preserve spaces, force all text to be displayed on the same line until the end of the text or the br tag is encountered
- pre-wrap: Keep spaces and wrap text when it hits the boundary
- pre-line: Do not retain spaces, retain the line wrapping of text, and wrap when the text hits the boundary
Direction: Specifies the direction of the text
- ltr By default, the text direction is from left to right.
- rtl text direction is from right to left.
text-align: Horizontal alignment of text
- left
- center
- right
line-height: Text line height
- normal default
vertical-align: The vertical alignment of the line height of the text
- baseline default
- sub vertically aligns the subscript of the text, the same effect as the tag
- super vertically aligns the superscript of the text, the same effect as the tag
- The top of the top object is aligned with the top of the container
- text-top The top of the object is aligned with the top of the text on the line
- Middle element objects are vertically aligned based on the baseline
- The bottom of the bottom object is aligned with the bottom of the text in the line
- The bottom of the text-bottom object is aligned with the bottom of the text in the line
text-indent: Text indent
letter-spacing: Adding space between letters
Word-spacing: Adding space between each word
text-transform: Attribute controls the case of text
- capitalize Every word in the text starts with a capital letter.
- uppercase defines uppercase letters only.
- lowercase definition only has lowercase letters.
text-overflow: Text overflow style
- clip Trim text.
- ellipsis displays ellipses... to represent trimmed text.
- string Use the given string to represent the trimmed text.
- text-decoration: Text decoration
-
- none is the default.
- underline underline.
- overline Overline.
- line-through center line.
text-shadow: text shadow
- The first parameter is the left and right position
- The second parameter is the up and down position
- The third parameter is the blur effect
- The fourth parameter is color
- text-shadow: 5px 5px 5px #888;
word-wrap: automatic line wrapping
- word-wrap: break-word;
5. List attributes
List-style-type: The type of list item mark
- none remove flag
- decimal-leading-zero; 02.
- square; square
- circle; hollow circle
- upper-alph; & disc; solid circle
List-style-image: Set the image as the list item logo
List-style-position: The position of the list item mark
- inside
- outside
list-style: abbreviation
6. Border
border-style: border style
- solid Default, solid line
- double double line
- dotted dotted lines
- dashed dashed line
border-color: border color
border-width: border width
border-radius: rounded corners
- 1 parameter: applied to all four corners
- 2 parameters: the first parameter is applied to the upper left and lower right; the second parameter is applied to the lower left and upper right
- 3 parameters: the first parameter is applied to the upper left; the second parameter is applied to the lower left and upper right; the third parameter is applied to the lower right
- 4 parameters: upper left, upper right, lower right, lower left (clockwise)
Border: abbreviation
- border: 2px yellow solid;
box-shadow: border shadow
- The first parameter is the left and right position
- The second parameter is the up and down position
- The third parameter is the blur effect
- The fourth parameter is color
- box-shadow: 10px 10px 5px #888;
🎜
7、display
- none 不显示。
- block 显示为块级元素。
- inline 显示为内联元素。
- inline-block 行内块元素（会保持块元素的高宽）。
- list-item 显示为列表元素。
8、盒子模型
什么是盒子模型？
padding:用于控制内容与边框之间的距离;
margin: 用于控制元素与元素之间的距离;
一个参数，应用于四边。
两个参数，第一个用于上、下，第二个用于左、右。
三个参数，第一个用于上，第二个用于左、右，第三个用于下
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），解决办法
<span style="color: #008080;">1</span> <span style="color: #800000;">body </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">3</span> }
9. float
Having two block-level tags displayed on one line will break away from the document flow
- none
- left floating left
- right float right
clear clear float:
- none : Default value. Allow floating objects on both sides
- left : No floating objects are allowed on the left
- right : No floating objects are allowed on the right
- both : Floating objects are not allowed on both sides
10、position
1 static, default value static: no special positioning, the object follows the normal document flow.
Top, right, bottom, left and other attributes will not be applied. Speaking of this, we have to mention a definition - document flow. Document flow is actually the output order of documents, which is what we usually see from left to right, from
In the top-down output form, each element in the web page is sorted and displayed in this order, and the float and position attributes can separate the elements from the document flow and display them. The default value is to let the element continue to follow
The document flow is displayed without making any changes.
2 position:relative
Relative: The object follows the normal document flow, but will be offset in the normal document flow based on top, right, bottom, left and other attributes. And its cascading is defined through the z-index attribute.
Absolute: The object is separated from the normal document flow and uses top, right, bottom, left and other attributes for absolute positioning. And its cascading is defined through the z-index attribute. If you set position:relative, you can use
Top, bottom, left and right to move the element relative to where it should appear in the document. [Meaning that the element actually still occupies its original position in the document, but is just visually relative to its original position in the document
Moved] When position:absolute is specified, the element is out of the document [that is, it no longer occupies a position in the document] and can be positioned accurately according to the set top, bottom, left and right. If an element is absolute
After positioning, its reference is based on whether the element closest to itself has set relative positioning. If it is set, it will position the element closest to itself. If not, it will look for the relative positioning element in its ancestor element until it finds html.
3 position:fixed
In theory, an element set to fixed will be positioned at a specified coordinate in the browser window, and it will be fixed at this position regardless of whether the window is scrolled or not.
Fixed: The object is separated from the normal document flow. Use top, right, bottom, left and other attributes to position the window as a reference point. When the scroll bar appears, the object will not scroll. And its cascading is determined by the z-index attribute
righteousness. Note
Point: If an element is set with position:absolute | fixed;, the element cannot be set to float. This is a common knowledge point, because these are two different streams, one is the floating stream, and the other is "positioning
Flow". But relative can. Because the space it originally occupied still occupies the document flow.
Positioning through the following four attributes:
- left
- top
- right
- bottom
- z-index