CSS (1) basic syntax, common attributes

Cao Laosan 2021-06-17 20:30:33
css basic syntax common attributes

  • CSS: Cascading style sheets . It is mainly used to set HTML Text content in the page ( typeface 、 size 、 Alignment, etc )、 The shape of the picture ( Wide and high 、 Border style 、 Margin, etc ) As well as the layout of the layout and other appearance display styles .
  • CSS grammar :CSS Instances are created by selectors , And one or more statements ( attribute ) Two parts . Each statement ( attribute ) There can be one or more values . Property and value are separated by colons .CSS The statement is marked with a semicolon ; end , Declaration in braces {} Cover up .
p {
color: red;
  • CSS notes :CSS Only... Is supported in /*  */ Annotate
/* I'm commenting on the content */
  • CSS introduce : introduce CSS There are three ways to create a style sheet . External style sheets 、 Internal style sheets 、 inline style .
Import external style files ( recommend ):<link> The label is on <head> tag . An external style sheet file cannot contain any HTML label . The stylesheet should use .css Extension to save .
href: Defines the... Of the linked external style sheet file URL, Can be a relative path , It could be an absolute path .
type: Define the type of linked document , It needs to be specified as “text/CSS”, Indicates that the linked external file is CSS Style sheets .
rel: Define the relationship between the current document and the linked document , It needs to be specified as “stylesheet”, Indicates that the linked document is a stylesheet file .
<link type="text/css" rel="styleSheet" href="./study.css" />
<!-- Inline style : In the syntax style It's the properties of the tag , In fact, any HTML Labels all have style attribute , Used to set inline . Among them, the writing standard of attributes and values is CSS The pattern rules are the same , An inline only works on the label it is on and the child tags nested within it . -->
<div style="font-style:italic; color:blue;"> Hello there</div>
<div class="a"> Hello A</div>
<!-- Internal style : In the syntax ,style The label is generally located at head In the label title After tag , You can also put him in HTML Anywhere in the document . -->
.a {
color: red;
CSS Selectors
  • CSS Selectors ( One ): Used to select a label on a page , stay CSS It's called a selector in .
  1. Wildcard selector : The wildcard selector is based on * Select all tags .
  2. tag chooser : Directly use the tag name to select all tags of the tag name .
  3. id Selectors :id The selector can select to be marked with the id Attribute HTML label .id Selector to "#" To define . An element can only have one ID
  4. Class selectors : The class selector can select the class Attribute HTML label . Class selector to "." To define .class Selectors are different from id Selectors ,class Properties can be used in multiple tags . It also supports multiple tags in one tag class Property value ( Space off ).
<!-- Classes can have multiple values on the same tag -->
<div class="a b c"> Hello A</div>
<!-- Class can be used on multiple tags -->
<div class="a b"> Hello B</div>
/* Wildcard selector */
* {
color: gray;
/* id Selectors */
#china {
color: red;
/* Class selectors */
.america {
color: green;
/* tag chooser */
li {
color: yellow;
  • CSS Selectors ( Two ):
  1. Background selector : The two elements are separated by spaces , And the elements are selected 1 Offspring of all levels
  2. Descendant selector : Only child elements can be selected
  3. Union selector : The union selector is separated by commas , Any other selector is supported , Multiple elements need to be written vertically
  4. Pseudo class selector : Pseudo class selectors represent the same tag , According to its different states , There are different styles . for example <a> Tags have two states before and after clicking .
<ol class="haha">
<p> I'm a son </p>
<p> I'm a grandson </p>
<div> Big bear </div>
<p> Two bears </p>
<span> Bald head strength </span>
<a href="http://www.baidu.com"> use Baidu Search </a>
/* Background selector : The two elements are separated by spaces , And the elements are selected 1 Offspring of all levels */
.haha p {
color: green;
/* Descendant selector : Only child elements can be selected */
.haha>p {
color: red;
/* Union selector : The union selector is separated by commas , Any other selector is supported , Try to write vertically */
.haha>a {
color: pink;
/* Pseudo class selector : Pseudo class selectors represent the same tag , According to its different states , There are different styles . for example <a> Tags have two states before and after clicking . Be careful : Be sure to write static pseudo class first , Post write dynamic pseudo class .
1. Static pseudo class : Styles that can only be used for hyperlinks .
:link. Before hyperlinks click ( The main thing is to be able to distinguish whether it has href Of <a> label )
:visited. After the link has been accessed
2. Dynamic pseudo class : For styles that apply to all labels .
:hover. hover , When the mouse is on the label
:active. Activate , Click on the label , But when you don't let go .
:focus. It's the style when a tag gets the focus ( It is generally used for input box to get focus )
/* Let the hyperlink click before */
a:link {
color: red;
/* After you click the hyperlink */
a:visited {
color: orange;
/* Mouse hovering , When you put it on the label */
a:hover {
color: green;
/* Click on the link , But when you don't let go ( Activate ) */
a:active {
color: black;
/* When the input box gets the focus */
input:focus {
background-color: palegoldenrod;
 CSS Common properties
  • CSS Unit of measure :
Name of the company explain Example
Piexels( Pixels ) The size of a pixel is set according to the user's display size and pixel density .classname { margin:5px; }
Points( pounds ) A pound is an inch of 1/72, From the print background design . .classname { margin:5pt; }
Inches( Inch ) 1 Inches is equivalent to 72 pound .classname { margin:5in; }
Centimeters( centimeter ) 1 Centimeter ratio 28 The pound is a little bigger .classname { margin:5cm; }
Millimeters( mm ) 1 Mm equals 1/10 centimeter ( about 3 pounds ) .classname { margin:5mm; }
Picas Picas It's another printing unit of measure , be equal to 12 pounds .classname { margin:5pc; }
Ems One em Equal to the size of the current font , Used to describe relative dimensions .classname { margin:5em; }
Exs Also related to the current font size , Equal to lowercase letters x Height , Not commonly used .classname { margin:5ex; }
Percent( percentage ) This unit and em relevant , It's a relative unit .classname { margin:125%; }
  • Font related properties : It can be used CSS Set the four main font properties :family( Font family )、style( style )、size( size ) and weight( thickness ). The font is usually set directly in body To control the entire page .
  1. font-family: Set the font of the text
  2. font-size: Set the font size of the text
  3. font-style: Set the font style of the text ( normal normal、 Italics italic、 tilt oblique)
  4. font-weight: Set the font thickness of the text
div {
height: 50px;
width: 50px;
#cqz {
/* Set the font family of the text : Regular script 、 Song typeface, etc ( Chinese characters are not recommended , English is recommended ). You can set multiple , When the current browser does not support , In the second , And so on */
font-family: " Regular script ";
/* Set the font size of the text : have access to px、em、 percentage . Different browsers have different font sizes by default , So you have to set the text default .h1 You need to specify the font size for the title label . */
font-size: 16px;
/* Set the text to italics : Default normal It's normal font */
font-style: italic;
/* Set text thickness : Mainly normal and bold These two values .blod For thickening . Or you can use numbers ( Be careful not to have units ) */
font-weight: 700;
/* Composite writing : The first two can be omitted , The last two cannot be omitted . */
font: font-style font-weight font-size font-family;
<div id="cqz"> Cao </div>
  • Text related properties :
  1. color: text color .
  2. text-align: Set horizontal alignment of text . Align left (left)、 Right alignment (right)、 In the middle (center) Align with both ends (justify).
  3. line-height: Set the vertical alignment of the text ( Row height )【 Realization principle : Line height is determined by text height + It's made up of gaps , When the parent class has a height , It will automatically fill the upper and lower gaps , Make sure the text is centered .】
  4. word-spacing: Set text word spacing
  5. letter-spacing: Set word and character spacing
  6. text-transform: Set up text conversion . nothing 、 Start with a capital letter 、 Uppercase and lowercase .
  7. text-decoration: Set text decoration . Underline 、 Delete line 、 Top line 、 Flicker, etc .
  8. text-indent: Set the indent distance of the first line of text .
#cqz {
/* Set text color ( The specific setting method is shown below CSS Color definition in ) */
color: #00f0ff;
/* Set text horizontal alignment : Align left (left)、 Right alignment (right)、 In the middle (center) Align with both ends (justify). */
text-align: center;
/* Set text vertical alignment ( Set row height , When the line height is the same as the height of the parent container and the text has only one line , The text is vertically centered ) */
line-height: 100px;
/* Set text decoration : Underline (underline)、 Delete line (line-through)、 Top line (overline)、 flashing (blink) etc. . Be careful :<a> The default value of the tag is underline, Want to get rid of <a> Underline of label , will text-decoration Set to none */
text-decoration: line-through;
/* Set text indent : Generally set as em, Represents the distance of the current text size , It's a relative unit */
text-indent: 2em;
a {
/* Remove <a> Default underline for labels */
text-decoration: none;
  • CSS Color definition in :W3C Standardized by the organization for standardization 16 The names of the colors in are :aqua( Water blue )、black( black )、blue( blue )、fuchsia( Purplish red )、gray( ash )、green( green )、lime( Green and yellow )、maroon( Pickled purple )、navy( Deep blue )、olive( Olive green )、ourple( purple )、red( red )、silver( silver )、teal( green )、white( white )、 and yellow( yellow ). You can also use hexadecimal RGB:#ff0000、#00ff00、#0000ff etc. . You can also use rgb function 【rgb(0,255,255)】
#cqz {
/* RGB function */
color: rgb(0, 255, 255);
/* Hexadecimal RGB */
color: #fff000;
/* W3C Standard color */
color: red;
  • Background properties :
  1. background-color: Set the background color
  2. background-image: Set the background image
  3. background-repeat: Set background image repeat / Tiling method
  4. background-position: Set background image positioning
  5. background-attachment: Set whether the background image is fixed or scrolls with the rest of the page
  6. background-size: Set the background image size 【CSS3 before , The size of the background image is determined by the actual size of the image 】
  7. background: Composite writing . Any attribute can be omitted .
<div class="cqz"></div>
* {
margin: 0;
padding: 0;
.cqz {
margin-top: 50px;
margin-left: 50px;
height: 1000px;
width: 1000px;
border: 1px solid red;
/* Set the background color */
background-color: rgb(0, 0, 0);
/* Set the background image : By default, the box is repeated */
background-image: url("../images/123.webp");
/* Set the background image to tile repeatedly :
1.repeat Repeat vertically and horizontally .【 Default 】
2.repeat-x Repeat horizontally .
3.repeat-y Repeat in the vertical direction .
4.no-repeat The background image will only be displayed once ( No repetition ).
background-repeat: no-repeat;
/* Set background image positioning : It is generally recommended that small icons and large images be set with backgrounds instead of <img>
1. You need to have two values .
2. If only one keyword is specified , So the second value would be center.
3. Position NOUN : top left center right( Position nouns do not distinguish the order of setting )
4. Pixels / percentage : When setting pixel values , The first value is x Axis , The second value is y Axis .
/* background-position: center top; */
background-position: 50% 100%;
/* Set the background image size : If the image size is set , The image is automatically stretched or compressed to the set size . */
background-size: 1000px 1000px;
/* Set whether the background image is fixed or scrolls with the rest of the page
1.scroll The default value is . The background image moves as the rest of the page scrolls .
2.fixed When the rest of the page scrolls , The background image doesn't move .
background-attachment: fixed;
/* Composite writing : Support omitting any attribute */
/* background: #00FF00 url(bgimage.gif) no-repeat fixed top; */
Display elements in a pattern
  • Display elements in a pattern : stay CSS in , According to the different display modes of elements, element tags are divided into two categories . Inline elements (inline-level)、 Block-level elements (block-level).
  1. Inline elements : In line elements are elements that do not monopolize a line , In line elements cannot have width and height set . Its width and height will change as the text changes . Block level elements cannot be filled inside . for example :<span> <buis> <strong> <em> <ins> <del> etc. ;
  2. Block-level elements : A block level element is an element that occupies a single line , Block level elements can set width and height , If you don't set the width and height , The default parent element is the same width , The height is 0. for example :<p> <div> <h> <ul> <ol> <dl> <li> <dt> <dd> etc. .
  3. In line block level elements : Because sometimes we not only need to set the width and height of the element , Also hope that the element does not monopolize one line , This brings up the inline block level element (inline-block). There will be white space between block level elements in the same row . for example <img><input><td> etc. .
  • transformation CSS Display mode of elements : Set the element's display attribute .inline( inline )、block( Block level )、inline-block( In line block level )
<span> I'm an insider , Converted to block level elements </span>
<div> I'm a block level element , Is converted to an in-line element </div>
<img src="../images/1.webp"><img src="../images/1.webp">
* {
margin: 0;
padding: 0;
/* take span Convert to block level elements */
span {
display: block;
background-color: red;
width: 400px;
height: 200px;
/* take div Convert to inline block level elements */
div {
display: inline-block;
background-color: green;
width: 300px;
height: 300px;
/* take img Convert to block level elements */
img {
display: block;
width: 200px;
CSS The three major characteristics
  • CSS The three major characteristics :CSS The three characteristics of this method are lamination 、 Inheritance and priority .
  1. Layering : Layering is in HTML There can be multiple for the same element in CSS Patterns exist , When there is Same weight When there is a pattern of , It will be written according to these styles Order To decide , At the bottom CSS The style will Cover Ahead CSS style .
  2. inheritance : Child tags inherit some of the styles of the parent tags , Such as text color and font size . Want to set an inheritable property , Just apply it to the parent element . Using inheritance properly can simplify code , Reduce CSS The complexity of the style . For fonts 、 Font size 、 Color 、 Row spacing, etc Text class properties are inherited , Can be in body Unified settings in , It then affects all text in the document . however , Not all CSS Properties can be inherited , Like a border 、 Margin 、 padding 、 background 、 location 、 Element height, etc None of the attributes associated with block level elements are inherited .
  3. priority : In complexity CSS Style sheets , It often happens that two or more different style rules are applied to the same element , Which style should be adopted at this time ? That's typical CSS Priority questions . There are the following rules for calculating priority : Inherit < Element selector < Class selectors / Pseudo class selector < ID Selectors < Inline style < !important
    1. The weight of the inherited style is 0: In nested structures , Regardless of the weight of the parent element style , When a child element inherits , The weights applied to the sub elements are 0, That is, the style defined by the child element will override all inherited styles .
    2. In line style takes precedence : application style Attribute elements , The weight of the inline style is very high , It can be understood that it is much greater than 100. All in all , He has a higher priority than the selector above .
    3. Nearby principle : When the weights are the same ,CSS Follow the principle of proximity . That is to say, styles close to elements have the highest priority , Or the last style has the highest priority .
    4. !important command :CSS Defined a !important command , This command is given the highest priority . That is to say, regardless of the weight and the position of the style ,!important All have the highest priority .
    5. The weights are superimposed , But never carry .( Next, we'll talk about the problem of weight superposition )
div {
height: 100px;
/* Layering : The attribute will be weighted equally CSS Cover */
width: 50px;
margin-left: 50px;
border: black 1px solid;
/* inheritance : This property is inherited by the child tag */
font-size: 20px;
/* inheritance : This property will be overridden by the child tag */
font-family: " Regular script ";
div {
/* Layering : This property will override the same weight above CSS */
width: 60px;
p {
font-family: " Microsoft YaHei ";
<p> Cao Laosan </p>
  • Weight superposition problem : The weight of each selector is shown in the table below . The weight of style inheritance is 0, The compound selector makes the weights overlap , The weight can't cross the line ,11 There are no classes id The power of
Selectors The weight
0000 0000
tag chooser 0001
Class selectors and pseudo class selectors 0010
ID Selectors 0100
Inline style 1000
!important +∞
<div class="father" id="fatherid">
<div class="child1" id="child1Id"> children 1</div>
* {
margin: 0;
padding: 0;
/* The weight of 0 */
background-color: pink;
.child1 {
/* The weight of 0010 */
background-color: red;
.father .child1 {
/* The weight of 0020 */
background-color: black;
#fatherid .child1 {
/* The weight of 0110 */
background-color: green;
#child1Id {
/* The weight of 0100 */
background-color: wheat;
#fatherid #child1Id {
/* The weight of 0200 */
background-color: greenyellow;
.child1 {
/* The weight of +∞ */
background-color: hotpink !important;


本文为[Cao Laosan]所创,转载请带上原文链接,感谢

  1. HTML + CSS + JavaScript to achieve cool Fireworks (cloud like particle text 3D opening)
  2. HTML + CSS + JavaScript realizes 520 advertising love tree (including music), which is necessary for programmers to express themselves
  3. Solve the problem of Web front-end deployment server (it can be deployed online without a server)
  4. HTML + CSS + JS make wedding countdown web page template (520 / Tanabata Valentine's Day / programmer advertisement)
  5. What else can driverless minibus do besides "Park connection"?
  6. Cloud native leads the era of all cloud development
  7. NRM mirror source management tool
  8. Bring it to you, flex Jiugong
  9. Lolstyle UI component development practice (II) -- button group component
  10. Deconstruction assignment in ES6
  11. Luo 2 peerless Tang clan was officially launched. The official gave a key point, and the broadcast time was implied
  12. 20初识前端HTML(1)
  13. 当新零售遇上 Serverless
  14. 20 initial knowledge of front-end HTML (1)
  15. When new retail meets serverless
  16. [golang] - go into go language lesson 5 type conversion
  17. [golang] - go into go language lesson 6 conditional expression
  18. HTML5(八)——SVG 之 path 详解
  19. HTML5 (8) -- detailed explanation of SVG path
  20. 需要开通VIP以后页面内容才能复制怎么办?控制台禁用javascript即可
  21. Web前端|CSS入门教程(超详细的CSS使用讲解,适合前端初学者)
  22. 实践积累 —— 用Vue3简单写一个单行横向滚动组件
  23. Serverless 全能选手,再下一城
  24. What if you need to open a VIP to copy the page content? Just disable JavaScript on the console
  25. Web front end | CSS introductory tutorial (super detailed CSS explanation, suitable for front-end beginners)
  26. Practice accumulation - write a single line horizontal scroll component simply with vue3
  27. Dili Reba is thin again. She looks elegant and high in a strapless hollow skirt, and her "palm waist" is beautiful to a new height
  28. Serverless all-round player, next city
  29. The difference between MySQL semi synchronous replication and lossless semi synchronous replication
  30. Vue表单设计器的终极解决方案
  31. The ultimate solution for Vue form designer
  32. Nginx从理论到实践超详细笔记
  33. Yu Shuxin's red backless swimsuit is split to the waist and tail, with a concave convex figure and excessive color matching, and his face is white to dazzling
  34. Nginx ultra detailed notes from theory to practice
  35. 【动画消消乐|CSS】086.炫酷水波浪Loading过渡动画
  36. typecho全站启用https
  37. CCTV has another popular employee. The off-site interpretation is very professional, and the appearance ability is no less than that of Wang Bingbing
  38. [animation Xiaole | CSS] 086. Cool water wave loading transition animation
  39. Enable HTTPS in Typecho
  40. 50天用JavaScript完成50个web项目,我学到了什么?
  41. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  42. What have I learned from completing 50 web projects with JavaScript in 50 days?
  43. "My neighbor doesn't grow up" has hit the whole network. There are countless horse music circles, and actor Zhou Xiaochuan has successfully made a circle
  44. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  45. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  46. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  47. 30 + women still wear less T-shirts and jeans. If they wear them like stars, they will lose weight
  48. 数栈技术分享前端篇:TS,看你哪里逃~
  49. Several stack technology sharing front end: TS, see where you escape~
  50. 舍弃Kong和Nginx,Apache APISIX 在趣链科技 BaaS 平台的落地实践
  51. Abandon the landing practice of Kong and nginx, Apache apisik on the baas platform of fun chain technology
  52. 浪迹天涯king教你用elementui做复杂的表格,去处理报表数据(合并表头,合并表体行和列)
  53. 前端HTML两万字图文大总结,快来看看你会多少!【️熬夜整理&建议收藏️】
  54. Wandering around the world king teaches you to use elementui to make complex tables and process report data (merge header, merge table body rows and columns)
  55. 路由刷新数据丢失 - vuex数据读取的问题
  56. Front end HTML 20000 word graphic summary, come and see how much you can【 Stay up late to sort out & suggestions]
  57. Route refresh data loss - vuex data reading problem
  58. Systemctl系统启动Nginx服务脚本
  59. Systemctl system startup nginx service script
  60. sleepless