In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-04 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article mainly explains "what are the CSS cascading styles". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what CSS cascading styles are.
CSS Cascading Style Sheet cascading style sheet
Set the style of the html page
Html is responsible for display css is responsible for style display and style separation
Where to write the css:
1 inside the label
2 on the page
Selector {
Attribute: valu
Attribute: valu
}
3 external css files (.css) in html by importing css files-most commonly used
Selector {
Attribute: valu
Attribute: valu
}
Selector: function? Used to select tags on the page
There are many kinds of selectors for css.
The three most commonly used:
1 tag selector tag {} div {} Select all div tags on the page p {}
2 id selector all tag id attributes on the same page do not have the same value
# tag id attribute value {
}
3 class selector (class selector) is defined before referencing
.aaa {} AAA
Properties commonly used in css:
Color Color
Font-size font size
Font-family font
Font-weight font weight
Font-style font style italic (italic)
Font: weight style size font
Line-height (row height)
Text-align (alignment)
Letter-spacing (character spacing)
Text-decoration (text retouching)
Cursor:pointer hand icon (of course, you can specify other shape icons)
Width width
Height height
Background-color:#FF0
Background-image:url (flower4.jpg)
Background-repeat:no-repeat
Background-position:300px 300px
Background:#3FF url (flower4.jpg) no-repeat 400px 400px
About the css of lists
List-style: decimal/lower-latin/ lower-roman/lower-greek
Circle/square/disc
None
Floating layout: break the feature that block-level tags occupy a single line in html
Float:left/right
-
Box model:
Border every html tag has a border border
Outer margin margin
Set the margin-left:100px of a tag
There can be no other tags in the left border 100px of this tag.
Margin-left
Margin-right
Margin-top
Margin-bottom
Margin: 1 value up and down, left and right 4 directions
Margin: 2 values above or below
Margin: 3 values up, left, right and down
Margin: 4 values up, right, down, left
The margin:100px auto; is about 100 in the center.
Inner margin padding
Set the inside margin padding-left:100px of the label
What is adjusted is the distance of the element contained in the tag to its left border (not to the set value, but to the set value).
Four states of hyperlink styl
Unaccessed status (a:link)
Accessed status (a:visited)
Mouse up status (a:hover)
Activate selected state (a:active)
Css of the picture:
Img {filter:gray} only ie is valid
Image rotation: transform:rotate (60deg) firefox
About hidden and displayed css
Display:none hiding
Inline does not have a single line
Block has a single line
Selector in CSS:
1 tag selector
2 ID selector
3 class selector
4 * the universal selector selects all the tags on the page
5E F descendant selector selects F tag F tag is the descendant of E tag
6 E > F parent-child relationship selector selects F tag F tag is a child of E tag
7 the direct afterbrother selector chooses F F if E's brother.
8 the general post-brother of Elaine
9 E [foo] Select to the E tag with the foo attribute
10 E [foo= "xxx"] Select the E tag where the value of the foo attribute is xxx
11 E [Foo ^ = "xxx"] Select to the E tag whose foo attribute value begins with xxx
12 E [foo$= "xxx"] Select to the E tag whose foo attribute value ends in xxx
13 Erecom FJG Select all E and F and G tags on the page
14 pseudo-class selector:
E:first-child
E:link
E:visited
E:active
E:hover
E:focus
Thank you for your reading, these are the contents of "CSS cascading style". After the study of this article, I believe you have a deeper understanding of what the CSS cascading style has, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.