search
HomeWeb Front-endHTML TutorialCompilation of css knowledge points

 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

  注意嵌套规则: 

  1. 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
  2. 块级元素不能放在p里面
  3. 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
  4. li内可以包含div
  5. 块级元素与块级元素并列、内联元素与内联元素并列。(错误的:

  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、颜色属性 

    

ppppp

     

ppppp

   

ppppp
 

    

ppppp

 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> 
View Code

 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> }
View Code

  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

 

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
HTML vs. CSS and JavaScript: Comparing Web TechnologiesHTML vs. CSS and JavaScript: Comparing Web TechnologiesApr 23, 2025 am 12:05 AM

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

HTML as a Markup Language: Its Function and PurposeHTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsThe Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorHTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignThe Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewHTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesHTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools