Web front end -- CSS

Hee hee hee hee hee 2020-11-13 01:57:48
web end css

CSS Cascading style sheets

One 、CSS Introduce

CSS Refers to cascading style sheets (Cascading Style Sheets) Define how to display controls HTML Elements , To beautify HTML Webpage .

CSS The advantages of

In order to make the style of web page elements richer , In order to separate the content and style of the web page ,CSS From this thought came , With CSS,html Most of the presentation style labels are discarded ,html Only responsible for the structure and content of the document , The form of expression is entirely given to CSS,html Documents become more concise .

Two 、CSS Basic syntax

Format :

Selectors { attribute : value ; attribute : value ; attribute : value ;…}

CSS Introduce methods :

Inline : By tagging style attribute , Write the style directly on the label .

<div style="width: 100px; height: 100px; color: red"></div>

The embedded : adopt style label , Create an embedded stylesheet on a web page .

<style type="text/css">

width: 100px;
height: 100px;
color: red;

Extraneous : adopt link label , Link to external style sheet to page .

<link rel="stylesheet" type="text/css" href="daongtaitianjia.html">

3、 ... and 、 Commonly used CSS style

Text settings
 color Set the color of the text , Such as : color:red;
font-size Set the size of the text , Such as :font-size:12px;
font-family Set the font of the text , Such as :font-family:' Microsoft YaHei ';
font-style Set whether the font is slanted , Such as :font-style:'normal';
Set no tilt ,font-style:'italic'; Set text skew
font-weight Set whether the text is bold , Such as :
font-weight:bold; Set bold
font-weight:normal Set no bold
font Set several attributes of the text at the same time , There is a compatibility problem with the order of writing , It is suggested to write in the following order :
font: Is it bold Font size / Row height typeface ; Such as : font:normal 12px/36px ' Microsoft YaHei ';
line-height Set the line height of the text , Such as :line-height:24px;
text-decoration Underline text , Such as :text-decoration:none; Remove the underline from the text
text-indent Set the first line of text to indent , Such as :text-indent:24px; Set the first line of text to indent 24px
text-align Set text horizontal alignment , Such as text-align:center Set text to center horizontally
css Color representation
css There are three main ways to express the color value :
1、 The color name means , such as :red Red ,gold golden
2、rgb Express , such as :rgb(255,0,0) It means red
3、16 The decimal number indicates , such as :#ff0000 It means red , This can be abbreviated as #f00

Four 、 Basic selector

tag chooser

tag chooser , This kind of selector has a wide range of influence , It is recommended to apply it to the level selector as much as possible . give an example :

margin: 0;
id Selectors

adopt id Name to choose elements , Elemental id The name cannot be repeated , So a style setting item can only correspond to one element on the page , It can't be reused ,id The name is usually used by the program , So... Is not recommended id As a selector . give an example :

color: rebeccapurple;
Class selectors

Select elements by class name , A class can be applied to multiple elements , You can also use multiple classes on one element , Application flexibility , Reusable , yes css One of the most used selectors in . give an example :

border: 2px gray solid;
width: 302px;
height: 450px;
padding: 3px;
margin: auto;
margin-top: 50px;
Hierarchy selector

It is mainly used to select the child element under the parent element , Or the child element below the child element , Can be used in combination with label elements , Reduce naming , At the same time, you can also go through the hierarchy , Prevent naming conflicts . give an example :

.content .content_title{
font-size: 20px;
color: blue;
border: 1px gray dashed;
padding-left: 10px;
Group selector

Multiple selectors , If you have the same style settings , You can use the group selector .
 Insert picture description here

Pseudo class and pseudo element selector

The commonly used pseudo class selectors are hover, Indicates the state of the mouse hovering over an element , Pseudo element selectors have before and after, They can insert content into elements through styles .
 Insert picture description here

5、 ... and 、 Box model

all HTML Elements can be seen as boxes , stay CSS in ,"box model" The term is used in design and layout .
 Insert picture description here

Box configuration
 Margin( Margin ) - Clear the area outside the border , The outer margin is transparent .
Border( Frame ) - The border around the inside margin and the outside of the content .
Padding( padding ) - Clear the area around the content , The inside margin is transparent .
Content( Content ) - The contents of the box , Show text and images .

 Insert picture description here  Insert picture description here

Box width and height calculation
 The width of the total element = Width + padding-left + Right fill + The left margin
+ Right margin + The left margin + The right margin
The height of the total element = Height + Top filling + Bottom filling + On the border
+ Under the frame + From the above + Bottom margin

6、 ... and 、CSS float

What is? CSS Float( float )?

CSS Of Float( float ), Causes the element to move left or right , The elements around it will also rearrange .
Float( float ), Often used for images , But it's also very useful in layout .

How elements float ?

The element floats horizontally , It means that elements can only move left and right, not up and down .
A floating element will try to move left or right , Until its outer edge touches the border of the containing box or another floating box .
The element after the floating element will surround it .
Elements before floating elements will not be affected .
If the image is floating right , The following text stream will wrap around it to the left :
 Insert picture description here
 Insert picture description here
 Insert picture description here
 Insert picture description here

Case realization

 Insert picture description here
 Insert picture description here
 Insert picture description here

Case study 2 Insert picture description here

 Insert picture description here
 Insert picture description here

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

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple