attribute

Finally arrived css attribute , In front of the scattered use of what color,font-size And so on , This blog introduces it specially

Font properties

font-family

This property sets the font style , For example, Microsoft YaHei , Founder style , Chinese Song typeface and so on

example , to body Label set font :

body {
font-family: "Microsoft Yahei", " Microsoft YaHei ", "Arial", sans-serif
}

You can use multiple font names as one “ Back off ” System to save . If the browser doesn't support the first font , Will try the next . The browser will use the first value it recognizes

font-weight

Word again , That is to set the thickness of the font

The values are as follows :

value describe
normal The default value is , Standard thickness
bord bold
border More thick
lighter A finer
100~900 Set the specific thickness ,400 Equate to normal, and 700 Equate to bold
inherit Inherit the thickness value of the parent element font

font-size

This is also used before , It's about setting the font size

example :

p {
font-size: 14px;
}

color

Set font color , I used it in the front

example :

p{
color:red;
}

Supports three color values :

  • Hexadecimal value Such as : #FF0000
  • One RGB value Such as : RGB(255,0,0)
  • The name of the color Such as : red,blue,black,white( English words for color )

Character properties

text-align

Set the horizontal alignment of the text , Its value is :

value describe
left Align left The default value is
right Right alignment
center Align center
justify full-justified

example :

p{
text-align:center;
}

line-height

That is, Xinggao , Space occupying in the vertical direction of the text , Its value is pixel size

example :

p{
line-height:20px
}

text-decoration

Text decoration , Its value is :

value describe
none Default . Define the standard text .
underline Define a line under the text .
overline Define a line on the text .
line-through Define a line through the text .
inherit Inheriting from the parent element text-decoration The value of the property

example :

a{
text-decoration:none;/* Express a The label has no underline */
}

text-index

Set text indent , Its value is in pixels

example :

p{
text-index:2px; /* Represents the indentation of two pixel positions */
}

text-shadow

Set font reflection , Its value is pixel unit plus color value

example :

p{
text-shadow:0px 0px 2px 2px #cdcdcd;
}

Background properties

There are a lot of background attributes , But don't forget :

background-color

The background color to use , Its value is the same as the previous color The value of the property is the same

example :

body{
backgroud-color:red;
} 

background-image

The background image to use

example :

body{
background-image: url(xx.png);
}

background-size

The size of the background picture

example :

body{
background-image: url(xx.png);
background-size:200px;
}

background-repeat

How to repeat the background image , After setting the size of the background image , If the size doesn't fit the picture , It's going to stretch or tile

value describe
repeat Default . The background image will repeat vertically and horizontally .
repeat-x The background image will repeat in the horizontal direction .
repeat-y The background image will repeat in the vertical direction .
no-repeat The background image will only be displayed once .
inherit Rules should be inherited from the parent element background-repeat Property settings

example :

body{
background-image: url(xx.png);
background-size:200px;
background-repeat:no-repeat;
}

background-attachment

Is the background image fixed or scrolling with the rest of the page , The values are as follows :

value describe
scroll The default value is . The background image moves as the rest of the page scrolls .
fixed When the rest of the page scrolls , The background image doesn't move .
inherit Rules should be inherited from the parent element background-attachment Property settings

example :

body{
background-image: url(xx.png);
background-size:200px;
background-repeat:no-repeat;
background-attachment:scroll
}

background-position

The location of the background image , The values are as follows :

value describe
top left 
top center 
top right 
center left 
center center 
center right 
bottom left 
bottom center 
bottom right
If only one keyword is set , So the second value is "center".
The default value is :0% 0%.
x% y% The first value is the horizontal position , The second value is the vertical position .
The upper left corner is 0% 0%. The lower right corner is 100% 100%.
If only one value is set , Another value is 50%.
xpos ypos The first value is the horizontal position , The second value is the vertical position .
The upper left corner is 0 0. Unit is pixel (0px 0px) Or anything else CSS Company .
If only one value is set , Another value is 50%.
It can be mixed % and position value .

inherit

Indicates that should be inherited from the parent element background Property settings , This is seldom used

The above background attributes are used in combination :

body {
background-color: blue;
backgraound-image: url(xx.png);
background-size: 200px 250px;
background-repeat: no-repeat;
background-position: center
}

Of course , It can also be abbreviated as this :

body {
background: red url(xx.png) no-repeat fixed center/200px 250px;
}

display attribute

Learn from the front html When labeling , We've learned about intraindustry labels , Block level label , Intra row block level labels , And that's what controls these tags from one to another display attribute

Let's start with the concept of intra and block level tags :

The properties of elements within a row

  • Side by side with other in line elements ;
  • Can't set width 、 high . Default width , It's the width of the text , have access to line-height Set the ratio in the vertical direction

Properties of block level elements

  • Occupy a business , It can't be juxtaposed with any other element ;
  • Can accept wide 、 high . If the width is not set , Then the width will default to the father's 100%

Classification of block level elements and in line elements :

In the past HTML In knowledge , We've categorized tags , It was divided into : Text level 、 Container level .

from HTML In terms of , The label is divided into :

  • Text level label :p、span、a、b、i、u、em.
  • Container level label :div、h series 、li、dt、dd.

PS: Why say p It's a text level tag ? because p Only words can be put in it & picture & Form Elements ,p You can't put... In it h and ul,p You can't put... In it p.

from CSS The perspective of ,CSS It's very similar to the above classification , Just p Is not the same :

  • Inline elements : except p outside , All the text level tags , It's all in-line elements .p It's a text level , But it's a block level element .

  • Block-level elements : All container level tags are block level elements , also p label

transformation :

Block level to in line , Previous features are missing :

div{
 display:inline;
}

After that, it will have the feature of in-line label :

  • At this point div Can't set width 、 Height ;
  • At this point div You can go side by side with other people

Intra row to block level , Previous features are missing :

span{
 display:block;}

After that, it will have the feature of in-line label :

  • At this point span Can set width 、 Height
  • At this point span We have to take over a line , No one else can be with him
  • If the width is not set , Will fill the parent html Elements

The box model

The box model is based on div Tag is the model of block level tag , stay html5 and css3 There's a lot more like that in the library div The label of , Let's talk about it when we need it

stay CSS in ,"box model" The term is used in design and layout , And then in the web page will basically show some square boxes . We call this box the box model

There are two kinds of box models : Standard models and IE Model

If you still don't understand my friend , such , Let's take Baidu home page as an example :

I chose id by head Of div, And then the one on the right css There's this figure at the bottom of the style , This is what a box model looks like . I believe you've noticed that margin and padding Words like that , Let's start with them

margin

It means outer margin , Indicates the distance from the border to the nearest box ,( For example, two. div Between )

margin-top,margin-left,margin-right,margin-bottom It means the distance up, left, right and down

example :

div{
margin: 20px; /* The outer distance in four directions is 20px*/
margin-top: 30px;/* The box is far from the top 30px*/
margin-left: 50px;/* The box is to the right 50px*/
margin-bottom: 100px;/* It means the distance from the box to the bottom 100px*/
}

padding

Inside margin means inside margin , Indicates the distance between the inner contents of the box and the border of the box

Again ,padding Also have padding-top,padding-left,padding-right,padding-bottom Four little attributes , It means the distance is up, left, right and down

Write separately :

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

Abbreviation :

 The up and down or so
*/
padding: 20px;
/* There are other abbreviations :*/
/*
On Right Next Left
*/
padding: 20px 30px 40px 50px ;
/*
On about Next
*/
padding: 20px 30px 40px;
/*
Up and down about
*/
padding: 20px 30px;
/*

According to the above , I believe you may have seen this before :

*{
padding:0;
margin:0;
}

So this is easy to understand , It is to control the inner and outer margins of the universal selector , Because a lot of html Tags have some default styles , So we need to reset

Other properties of the box model

width: The width of the content

height: The height of the content

left: The left margin

right: The right margin

top: From the above

bottom: Bottom margin

box-shadow: Box shadow , Its value is : Add color values to the pixel units in the upper, lower, left and right directions

example : box-shadow: 0px 0px 2px 2px #cdcdcd;

The calculation of box model

The true width of the box =width+2*padding+2*border

The true width of the box =height+2*padding+2*border

And because html The relationship between label nesting , The child element inherits from the parent element css style , So there are different pixel units for width, height, etc

If a big div The pattern is as follows :

width:1000px;

This is big div There's also a little div, Its style is :

width:80%

So this little div What's the width ?

We know , By default ,80% It's the width of the screen 80% Right , But because there's a big one in the outer layer div, And big div The width has been set to 1000px, So this little div Reality width It's actually 1000px multiply 80%=800px

border

It means border , Describe the border of the box . The border has three elements : thickness ( Pixel unit ) Linear style Color (color value )

Linear styles also have small attributes :

  • solid( Solid line )
  • dashed( Dotted line )
  • double( Double solid line )

border There are the same margin and padding The same up, down, left and right four small attributes

example :

border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/

Clear the default style of the border :

border:none;
border:0;

example : Use border Set up a small triangle

/* Trigonometry The arrow points down */
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

web front end (9)—— CSS More articles on attributes

  1. Python web front end 03 CSS attribute

    Python web front end 03 CSS attribute One . written words . Text attribute 1. Character properties font-family # Font type browser default font is Microsoft YaHei , When there are multiple fonts in the font , If the front font doesn't, use the back font ...

  2. Good programmer web Front end sharing css Common attribute abbreviations

    Good programmer web Front end sharing css Common attribute abbreviations , Using abbreviations can help reduce your CSS File size , Easier to read .css The main rules for abbreviations are as follows : Color 16 The color value of the base , If every two digits have the same value , You can abbreviate it in half , for example : #0000 ...

  3. WEB The front-end development CSS A comprehensive summary of basic styles

    Web The front-end development css A comprehensive summary of basic styles The use of colors and units Color Use the name of color to denote color , such as :red use 16 Hexadecimal means Demo such as :#FF0000 use rgb The number represents the color ,rgb( red , green , blue ), Each value is in 0-2 ...

  4. Python web front end 02 CSS

    Python web front end 02 CSS One . Selectors 1.CSS There are several styles of (CSS To embellish . Beautify the website ) # Establish a template Copy content --->SETTING---> Editor -----> ...

  5. Good programmer web Front end sharing CSS Element type

    Good programmer web Front end sharing CSS Element type The goal is 1. Element type classification basis and element type classification 2. Conversion of element types 3.inline-block Application of element type 4. Concepts and application cases of permutation and non permutation elements One . Element types are classified according to ...

  6. Front end Foundation -CSS Attribute operation

    Front end Foundation -CSS Attribute operation css text text color :color The color attribute is used to set the color of the text . Color is through CSS The most frequent designation : Hexadecimal value - Such as : #FF0000 One RGB value - Such as : RGB( ...

  7. 1+x certificate Web The front-end development css Special exercises

    official QQ Group 1+x certificate Web The front-end development css Special exercises http://blog.zh66.club/index.php/archives/192/

  8. Web Review the old and learn the new -CSS Basics

    One .CSS Define and write CSS 1.1 CSS The definition of full name :Cascading Style Sheets -> Cascading style sheets Definition :CSS Become a cascading style sheet , It's mainly used to set up HTML Text content in the page ( typeface . ...

  9. web@ front end --html,css,javascript brief introduction 、 The first page ( Introduction to common labels )

    1. What is a label #1. stay HTML Angle brackets in English are used in the label `<` and `>` wrap up , Such as `<html>`.`<head>`.`<body>` It's all labels ,#2. ...

  10. web The front-end development ——css

    One .css Introduce 1.css What is it? ? Cascading Style Sheets abbreviation , Cascading style sheets . Styles define how to display HTML Elements , Styles usually exist in style sheets again . 2. Why css? send HTML The page becomes ...

Random recommendation

  1. js in function Parameter default

    -- stay dreamweaver When making a website , Function definition is in a *.js In file , It defines a func, There are four parameters ,function func(string1,url,flag,icon), And then in the other one asp in ...

  2. In the browser WebSocket(&quot;ws://127.0.0.1:9988&quot;);

    <script type="text/javascript"> function WebSocketTest() { if ("WebSocket" ...

  3. python Variable of

    What is a variable ? Variable is to store an unfixed value , Its value can be changed at any time . 1. Variables can be more than numbers , It can also be any data type 2. The variable name must be case English . Numbers and _ The combination of , And can't start with a number python How variables are stored First ...

  4. java Several common thread pools in development

    Thread pool java.util.concurrent:Class Executors Common thread pool Several common methods of generating thread pool : newCachedThreadPool newFixedThreadPoo ...

  5. @Autowired mapper level bean With red line

    Using @Autowired Annotation creation bean When There will be a red line when there is time It gives people a sense of reporting mistakes Here's how to remove the red line Turn the color red error Level down to yellow warn  that will do

  6. UGUI Blood strip

    using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI; pu ...

  7. Salesforce Invoking Http Callouts and Testing Http Callouts

    This article refers to official documents and zero zhang The blog of : https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/ape ...

  8. webrtc real-time video .net websocket Signaling server

    This article mainly refers to  Webrtc WebSocket Realize audio and video communication , Thank you very much for the code The front end is completely copied from this article , Just modified webscket Of url, And joined webrtc-adapterjs ...

  9. iOS Cool animation effect collection

    iOS Cool animation effect collection Source code address https://github.com/YouXianMing/Animations The effect is absolutely cool , Contains a variety of animation types , Such as POP.Easing. Particle effects and so on , although ...

  10. WinForm Control keyboard message processing analysis ( turn )

    Always wanted to sort out the calling sequence of keyboard events , Just saw this article in the garden , Well written , And reprinted :http://www.cnblogs.com/tedzhao/archive/2010/09/07/1820557.html ...