Home > Developer > Web Develop
How to use CSS in HTML
1. Inline style
<p style= "color:red" > Paragraph styles </p>
2. Inline style
<style type= "Text/css" >
p{
color:red;
font-size:12px;
}
</style>
3. Link Style
<link rel= "stylesheet" type= "Text/css" href= "1.css"/>
4. Importing styles
<style type= "Text/css" >
@import "1.css"
</style>
The import style sheet must be at the beginning of the style sheet, with other internal style sheets above
Priority issues
Inline styles > Inline styles > Link styles > Import styles
-------------------------------------------
CSS Basic syntax
Depending on the CSS selector, the selector can be divided into tag selectors, class selectors, global selectors, ID selectors and pseudo-class selectors.
The global selector works for all HTML elements
*{property:value;}
Pseudo-class acting on the state of the tag
Pseudo-classes include: First-child,:link,:vistited,:hover,:active,:focus,:lang, etc.
Pseudo-Class of hyperlinks:: link,:vistited,:hover,:active
<title> pseudo-Class </title>
<style type= "Text/css" >
a:link{color:red}/* Links not visited */
A:visited{color:green}/* Visited link */
A:hover{color:blue,}//mouse moves to the connection */
A:active{color:orange;}/* Selected link */
</style>
<body>
<a href= "" > Link to this page </a>
<a href= "http://www.sohu.com" > Sohu </a>
</body>
---------------------------------------
CSS fonts and paragraph attributes
Font
{Font-family:name,name ...}
When the current font does not display properly, use the latter font, if the font is composed of multiple strings and spaces, double quotation marks are added.
Size
{font-size: Value}
Font style
{Font-style;normal|italic|oblique|inherit}
Bold font
{font-weight:100~900}
Font Composite Properties
{font:font-style font-variant font-weight font-size font-family}
Font colors color
----------------------------------------------
CSS paragraph styles
P{word-spacing:15px|normal} is used to set the interval between words, not to set the spacing between the text
Character interval
P{letter-spacing:15px|-15px|normal}
Text decoration
{Text-decoration:none|wuderline|overline|line-through|blink}
Vertical alignment
{vertial-align: Property value} Property value has 8 presets available, or can be used as a percentage
------------------------------------------
Text conversion
{Text-transform:none|capitalize|uppercase|lowercase}
Capitalize: Converts the first letter of each word to uppercase
Horizontal alignment
{text-align: Attribute value} is used to define the alignment of text
Text indent
{Text-indent:length} Sets the indent, percentage, or other 10mm of the first line in a text block
Text line height
{Line-height:normal|length} set line spacing px,mm,%
Handling whitespace
{White-space:normal|pre|nowrap|pre-wrap|pre-line} is used to set how white space characters are handled within an object
Pre: blank will be reserved by the browser
Text anti-row
{unicode-bidi:normal|bidi-override|embed}
{Direction:ltr|rtl|inherit}
------------------------------------
Beautify your pictures with CSS
You can also use CSS to define the width,height,max-width,max-height of the image, so as to achieve the zoom effect of the image
Align picture
The picture itself does not have an alignment attribute and needs to use CSS to inherit the parent tag's text-align to define the alignment
Vertical alignment
<p> alignment </p>
Picture and text mixed row
Float:none|left|right
img{
Float:left;
}
is the text around the picture around
Set Picture and text spacing
If you need to set the distance between the picture and the text, that is, there is a certain amount of space between the text, not tightly wrapped, you can use the Padding property in CSS to set (padding)
----------------------------------------
Set the background and border with CSS
{Background-color:transparent|color} set page background color
Background image
{Background-image:none|url (URL)}
The Background-repeat property is used to set whether the background picture is tiled repeatedly
The Background-attachment property is used to set whether the background picture scrolls along with the document, which includes two property values scroll and a fixed
The Background-position property is used to specify where the background picture is located in the page
Background image size
Background-size:<length>|<percentage>|cover|contain
background-size:900 800; First width, second height
Background Composite attribute Property order can be freely swapped
-----------------------------------------
Set border
In web design, HTML elements occupy a certain area in the page
Border Style
{Border-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset}
Border color
Border-color:color
Border line width
Border-width:medium|thin|thick|length
Border Composite Properties
border:border-width| | border-style| | Border-color
-------------------------------------
Beautify hyperlinks and mice with CSS
For super-join adornments, CSS pseudo-classes can often be used
A:link defines the style of a object before it is accessed
A:hover defines the style of a object when it hovers over it
A:active defines the style of a object when it is activated by the user (events that occur between mouse clicks and releases)
A:visited defines the style of a object when its link address has been accessed
<a href= "" title= "" ></a> title prompt Information
Hyperlink background Map Settings
A{background-image:url (URL);}
button effects for hyperlinks
A:hover, when the mouse is linked, it moves the link down and shifts one pixel to the right
Mouse effects
Using CSS to control mouse arrows
CSS controls the mouse style by changing the cursor property, which contains 17 property values
-------------------------------------------
Beautify tables and form styles with CSS
{Border-collapse:separate|collapse} The previous one is the default property, which means that the border will be separated and the latter will be merged into a single border
Table Border Width
{border-width:}
Table border Color
You typically use CSS property color to set the color of text in a table
Use Background-color to set the background color of a table, and also to set a cell color
--------------------------------------
CSS and Forms
Beautify the elements in the form
Input{background-color:}
Beautify Submit button
Define the border of the form element, either with Border-style,border-width,border-color or with the Gbackground-color property, set the value to transparent (transparent)
Landscaping drop-down menu
---------------------------------------
Make a practical menu with CSS
The navigation menu is one of the essential elements of the site and can be freely redirected on the page via the navigation menu.
Project List
UL ol DL
In CSS, you can define bullets in front of an unordered list by using the property List-style-type
{List-style-type:dics|circle|square|none} solid circle, hollow circle, solid block
Beautify the ordered list
{List-style-type:decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none} Arabic numerals lowercase roman numerals capital Roman numerals lowercase English letters capital letters
Beautify your custom list
Picture List
For ordered or unordered tables, you can not only change the special symbols in front of the options by List-style-type, but also use the List-style-image property to replace each previous bullet with any picture
{list-style-image:none|url (URL);}
List indent
In CSS, you can set the picture display location by list-style-position
{List-style-position:outside|inside}
Composite attribute List-style
A menu without tables
The menu is converted vertically
Landscape Menu
Li{float:left;}
A{display:biock;}
----------------------------------------
Application of CSS Filters
Apply to IE9 Browser
The identifier for the Filter property of CSS is the filter, which is in the following syntax format:
Filter:filtername (Parameters)
FilterName is the filter name, para specifies the parameters in the filter
CSS Basic Filter
Channel (Alpha) filter
Transparency effect of picture text elements
Filter:alpha ()
Blur Filter
Implement page Blur effect Filter:blur ()
Chroma Filter
You can set the color specified in the HTML object to be a transparent color
Filter:chroma
DropShadow Filter
Shadow effects are useful in actual text and pictures
Filter:dropshadow ()
FLIPH Filter
Implement HTML object rollover effect, flip horizontally
Filter:fliph (enable=benabled)
Glow Filter
Creates a soft border or glow around the edges of an object and produces a flame-like effect
Filter:glow ()
Gray Filter
Use the gray filter to easily turn a color image into a black and white picture
{Filter:gray ();}
Invert filter
Make a picture produce a "negative" or negative effect
{Filter:invert ();}
FLIPV Filter
To implement a vertical rollover of an object
{FILTER:FLIPV ();}
Mask Filter
Make a rectangular matte for an element object in a Web page
{Filter:mask ();}
Shadow Filter
Add a shadow to an object
{Filter:shadow ()}
Wave Filter
You can add a wavy effect to an object in a vertical direction
{Filter:wave ();}
X-ray Filter
Make the whole look like an X-ray effect
{Filter:xray ();}
Advanced Filters for CSS
Advanced filters refer to scripting languages that need to work with JavaScript, and filters that produce transformations
Blendtrans Filter
You can implement the fade-out effect of HTML objects
{Filter:blendtrans ()}
Light Filter
Produces an effect similar to a light light
{Filter:light ()}
Revealtrans Filter
To achieve the switching effect between images
{Filter:rrvealtrans ()}
-------------------------------------------------
CSS positioning and div layout
In the design of Web pages, the key to the overall layout of a Web page is to be able to locate each element of the page well.
Positioning method
Positioning properties
Position property
In CSS, you can position elements in a page by using the Position property.
Position:static|relative|absolute|fixed
Default values, relative positioning, absolute positioning, fixed positioning
<title> Positioning Properties </title>
<body>
<div>
This is absolute positioning </div>
</body>
Relative positioning
Position:relative
The coordinate origin of absolute positioning is the origin of the ancestor element, which is related to the ancestor element; relative positioning coordinates origin is the origin of its own offset, independent of the ancestor element
Fixed positioning
Position:fixed
Fixed positioning is similar to absolute positioning, but the reference position is not a parent element block but a browser window, you can fix some effects in the browser's eye position
-----------------------------------
Stacking order (Depth)
The Z-index is used to set the order of the elements to be stacked by assigning a number to each element, with the larger number of elements superimposed on the smaller number of elements
Z-index:auto|number
This property can only be used for position and relative objects
Edge Offset Property
Left Right top buttom
--------------------------------------
Floating positioning
The floating position can only be positioned in the horizontal direction and cannot be positioned vertically.
Float:none|left|right
Clear floating
Clear:none|left|right|both
Overflow positioning
Element content is more, the element box does not display, you can use the Overflow property overflow to control this situation
Overflow:visible|auto|hidden|scroll
Hide Location
Specifies whether to display an element generated by an element mine
Visibility:inherit|visible|collapse|hidden
Visible: Element Visibility
Hidden: Element hiding
Collapse: main hidden rows or columns of a table
Elements still occupy the original space
Block and inline elements
display:block|inline|~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
