css学习
2018-12-20 20:49:47 0 举报
AI智能生成
css学习
作者其他创作
大纲/内容
使用css
inline
<p style="color: red">text</p>
internal
<style>
a {
color: blue;
}
</style>
a {
color: blue;
}
</style>
external
<link rel="stylesheet" href="style.css">
Selectors, Properties, and Values
selector
HTML Tag or a element name
like a、p,mySelector
properties
For each selector there are “properties” inside curly brackets
like color,background-color
value
A value is given to the property following a colon
body {
font-size: 14px;
color: navy;
}
font-size: 14px;
color: navy;
}
Lengths and Percentages
px
a unit of pixels
em
the unit for the calculated size of a font. So “2em”, for example, is two times the current font size
pt
the unit for points, for measurements typically in printed media.
%
the unit for… wait for it… percentages
when the value is zero ,you needn't use the unit state
color
name
like red,color:red
RGB (red/green/blue) value
color:rgb(255,0,0)
hex code
color : #ff0000 equals with color:#f00
text
font-family
So font-family: arial, helvetica, serif, will look for the Arial font first and, if the browser can’t find it, it will search for Helvetica, and then a common serif font
Note: if the name of a font is more than one word, it should be put in quotation marks, such as font-family: "Times New Roman".
font-size
the size of font,the title should use the HTML Tag h1-h6
font-style
states whether the text is italic or not.
font-style: italic or font-style: normal.
font-weight
this is used as font-weight: bold or font-weight: normal but other values are bolder, lighter, 100, 200, 300, 400 (same as normal), 500, 600, 700 (same as bold), 800 or 900.
text-decoration
text-decoration: underline, does what you would expect.
text-decoration: overline, places a line above the text.
text-decoration: line-through ,puts a line through the text
text-transform
text-transform: capitalize turns the first letter of every word into uppercase.
text-transform: uppercase turns everything into uppercase.
text-transform: lowercase turns everything into lowercase.
text-transform: none I’ll leave for you to work out.
text-space
line-height
sets the height of the lines in an element,such as a paragraph
text-align
align the text inside an element to left, right, center, or justif
letter-spacing
the space between letter,the value can a number or normal
word-spacing
the space between word,the value can a number or normal
text-indent
indent the first line of a paragraph,you can given the value or percentage
the normal style
Margins and Padding
Margins has for properties:margin-top, margin-right, margin-bottom, margin-left
Padding also has four properties :padding-top, padding-right, padding-bottom and padding-left
The Box Model
Margins, padding and borders are all part of what’s known as the Box Model. The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this
Border
border-style
solid, dotted, dashed, double, groove, ridge, inset and outset
border-width
border-color
you can only set one side the style ,such as border-left,border-right,border-top,border-buttom,when the properties is border ,it will be give four side style
Class and ID Selectors
class Selector
a class selector is a name preceded by a full stop (“.”)
ID Selector
ID selector is a name preceded by a hash character (“#”)
different
The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { /* whatever */ } will only be applied to paragraph elements that have the class “jam”.
Grouping and Nesting
Two ways that you can simplify your code — both HTML and CSS — and make it easier to manage.
Group
You can give the same properties to a number of selectors without having to repeat them.
example
.bg-color{
color:red
}
.hd-color{
color:red
}
you can make them a group like:
.gbcolor, .hd-color{
color:red
}
color:red
}
.hd-color{
color:red
}
you can make them a group like:
.gbcolor, .hd-color{
color:red
}
Nesting
If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.
example
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
This removes the need for classes or IDs on the p
and h1 tags if it is applied to HTML that looks something like this:
and h1 tags if it is applied to HTML that looks something like this:
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
meaning
This is because, by separating selectors with spaces,
we are saying “h1 inside ID top is colour #ff0” and
“p inside ID top is red and bold”.
we are saying “h1 inside ID top is colour #ff0” and
“p inside ID top is red and bold”.
Pseudo Classes
Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo_class { property: value; }, simply with a colon in between the selector and the pseudo class.
Links
link, targeting unvisited links, and visited, targeting, you guessed it,
visited links, are the most basic pseudo classes.
visited links, are the most basic pseudo classes.
a:link {
color: blue;
}
a:visited {
color: purple;
}
color: blue;
}
a:visited {
color: purple;
}
Dynamic Pseudo Classes
active
s for when something activated by the user, such as when a link is clicked on.
hover
is for a when something is passed over by an input from the user,
such as when a cursor moves over a link.
such as when a cursor moves over a link.
focus
is for when something gains focus, that is when it is selected by,
or is ready for, keyboard input.
or is ready for, keyboard input.
First Children
there is the first-child pseudo class. This will target something only if it is the very first descendant of an element
子主题
Shorthand Properties
Some CSS properties allow a string of values, replacing the need for a number of properties.
These are represented by values separated by spaces.
These are represented by values separated by spaces.
Margins and Padding
margin allows you to amalgamate margin-top, margin-right,
margin-bottom, and margin-left in the form of
property: top right bottom left;
margin-bottom, and margin-left in the form of
property: top right bottom left;
p {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 20px;
}
margin-top: 1px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 20px;
}
p {
margin: 1px 5px 10px 20px;
}
margin: 1px 5px 10px 20px;
}
Borders
border-width can be used in the same way as margin and padding, too.
You can also combine border-width, border-color, and border-style
with the border property
You can also combine border-width, border-color, and border-style
with the border property
p {
border-width: 1px;
border-color: red;
border-style: solid;
}
border-width: 1px;
border-color: red;
border-style: solid;
}
p {
border: 1px red solid;
}
border: 1px red solid;
}
Fonts
This combines font-style, font-weight, font-size,
line-height, and font-family.
line-height, and font-family.
p {
font: italic bold 12px/2 courier;
}
font: italic bold 12px/2 courier;
}
Background Images
Used in a very different way to the img HTML element,
CSS background images are a powerful way to add
detailed presentation to a page.
CSS background images are a powerful way to add
detailed presentation to a page.
body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}
background-color
set the background a color, name, hex or rgb()
background-image
which is the location of the image itself.
properties value
none
no image
[URL]
location of the image file
[URL],[URL]
Multiple background images can be separated by commas.
The first image will be applied on top, “nearest” to the user.
Subsequent images will be applied underneath the image
that comes before it.
The first image will be applied on top, “nearest” to the user.
Subsequent images will be applied underneath the image
that comes before it.
first image is over the second image
also use the backgrand-position value,also top left or top right
initial
inherit
upset
background-repeat
repeat
the equivalent of a “tile” effect across the whole background
repeat-y
repeating on the y-axis, above and below,
the position is influenced by
the properties value of background-position
the properties value of background-position
repeat-x
(repeating on the x-axis, side-by-side), or
the position is influenced by
the properties value of background-position
the properties value of background-position
no-repeat
which shows just one instance of the image
background-position,
which can be top, center, bottom, left, right, a length,
or a percentage, or any sensible combination, such as top right.
or a percentage, or any sensible combination, such as top right.
properties values
[length]
The point of the left or top side of the image,
measured from the left or top of the background area.
measured from the left or top of the background area.
packground-position:10px
[percentage]
Measured from the left or top of the background area,
where 0% pushes the image up against the starting point,
and 100% pushes the image up against the end point of
the full width or height of the background area.
where 0% pushes the image up against the starting point,
and 100% pushes the image up against the end point of
the full width or height of the background area.
background-position:20%
center
Keyword. The equivalent of 50% 50%, if used by itself.
top
Keyword. The equivalent of 50% 0%, if used by itself.
right
Keyword. The equivalent of 100% 50%, if used by itself.
bottom
Keyword. The equivalent of 50% 100%, if used by itself.
left
Keyword. The equivalent of 0% 50%, if used by itself.
[value] [value]
Any sensible combination of two lengths/percentages or two keywords.
If values are lengths or percentages, the first is the horizontal position
and the second is the vertical position.
If values are lengths or percentages, the first is the horizontal position
and the second is the vertical position.
10px 20px
10% 20%
10px 20%
top left
10px bottom
[value] [value] [value]
Offset.
First value is a keyword.
Second value is a length/percentage representing
distance from the edge defined by the first value.
Third value is a keyword with no offset.
First value is a keyword.
Second value is a length/percentage representing
distance from the edge defined by the first value.
Third value is a keyword with no offset.
top 10px right
[value] [value] [value] [value]
Offset.
First value is a keyword.
Second value is a length/percentage representing
distance from the edge defined by the first value.
Third value is a keyword.
Fourth value is a length/percentage representing
distance from the edge defined by the third value.
First value is a keyword.
Second value is a length/percentage representing
distance from the edge defined by the first value.
Third value is a keyword.
Fourth value is a length/percentage representing
distance from the edge defined by the third value.
top 10px right 10px
[values], [values]
For multiple backgrounds. Value sets separated by commas correspond to
multiple images separated by commas with background-image.
multiple images separated by commas with background-image.
top left,10px 20px
when have two background-image ,you can use it.
first value can set the first image'position,
the second value can set the second image's position
first value can set the first image'position,
the second value can set the second image's position
inherit(继承)
initial(最初的)
unset(不设置)
Specificity
If you have two (or more) conflicting CSS rules that point to the same element,
there are some basic rules that a browser follows to determine
which one is most specific and therefore wins out.
there are some basic rules that a browser follows to determine
which one is most specific and therefore wins out.
More Specific = Greater Precedence
- If the selectors are the same then the last one will always take precedence
for example:
p { color: red }
p { color: blue }
p { color: red }
p { color: blue }
The text in the box of p elements would be colored blue
because that rule came last
because that rule came last
- Conflicts quite legitimately come up, though, when you have nested selectors
for example:
div p { color: red }
p { color: blue }
div p { color: red }
p { color: blue }
In this example it might seem that a p within a div would
be colored blue, seeing as a rule to color p boxes blue comes last,
but they would actually be colored red due to the specificity of
the first selector. Basically, the more specific a selector,
the more preference it will be given when it comes to conflicting styles.
be colored blue, seeing as a rule to color p boxes blue comes last,
but they would actually be colored red due to the specificity of
the first selector. Basically, the more specific a selector,
the more preference it will be given when it comes to conflicting styles.
Calculating Specificity
The actual specificity of a group of nested selectors takes some calculating. You can give every ID selector (“#whatever”) a value of 100, every class selector (“.whatever”) a value of 10 and every HTML selector (“whatever”) a value of 1. When you add them all up, hey presto, you have a specificity value.
example:
- p has a specificity of 1 (1 HTML selector)
- div p has a specificity of 2 (2 HTML selectors, 1+1)
- .tree has a specificity of 10 (1 class selector)
- div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10)
- #baobab has a specificity of 100 (1 id selector)
- body #content .alternative p has a specificity of 112 (HTML selector + id selector + class selector + HTML selector, 1+100+10+1)
Display
The HTML element ‘s display type
the most
fundamental types
fundamental types
inline
boxes that are displayed inline follow the flow of a line
div{
width: 50px;
height: 50px;
border: 2px red solid;
display: inline-block;
}
width: 50px;
height: 50px;
border: 2px red solid;
display: inline-block;
}
when properties value display is inline,the border will
around the content,and the width and height will unset
around the content,and the width and height will unset
block
block makes a box standalone, fitting the entire width of its containing box,
with an effective line break before and after it. Unlike inline boxes,
block boxes allow greater manipulation of height, margins, and padding. Heading
and paragraph elements are examples of elements
that are displayed this way by default in browsers.
with an effective line break before and after it. Unlike inline boxes,
block boxes allow greater manipulation of height, margins, and padding. Heading
and paragraph elements are examples of elements
that are displayed this way by default in browsers.
span{
width: 50px;
height: 50px;
border: 2px red solid;
display: block;
}
width: 50px;
height: 50px;
border: 2px red solid;
display: block;
}
span{
border: 2px red solid;
display: block;
}
border: 2px red solid;
display: block;
}
inline-block
keep a box inline but lend the greater formatting flexibility of block boxes,
allowing margin to the right and left of the box
allowing margin to the right and left of the box
span{
width: 50px;
height: 50px;
border: 2px red solid;
display: inline-block;
}
width: 50px;
height: 50px;
border: 2px red solid;
display: inline-block;
}
none
none, well, doesn’t display a box at all, which may sound pretty useless
but can be used to good effect with dynamic effects,
such as switching extended information on and off at the click of a link,
or in alternative stylesheets.
but can be used to good effect with dynamic effects,
such as switching extended information on and off at the click of a link,
or in alternative stylesheets.
difference
the initial
a example of display is not none,and visibility not hidden
display: none
takes the element’s box completely out of play,
like it isn't in there
like it isn't in there
visibility: hidden
keeps the box and its flow in place without visually representing its contents
opacity: 0;
the same as visibility: hidden
others
Tables
A block-level table — the equivalent of the default styling of the HTML table element.
子主题
inline-table
An inline-level table.
table-row-group
The equivalent of the default styling of the HTML tbody element.
table-header-group
The equivalent of the default styling of the HTML thead element.
table-footer-group
The equivalent of the default styling of the HTML tfoot element.
table-row
The equivalent of the default styling of the HTML tr element.
table-column-group
The equivalent of the default styling of the HTML colgroup element.
table-column
The equivalent of the default styling of the HTML col element.
table-cell
The equivalent of the default styling of the HTML td or th elements.
table-caption
The equivalent of the default styling of the HTML caption element.
Pseudo Elements
Pseudo elements suck on to selectors much like pseudo classes,
taking the form of selector:pseudoelement { property: value; }.
taking the form of selector:pseudoelement { property: value; }.
First Letters and First Lines
The first-letter pseudo element applies to the first letter inside a box
and first-line to the top-most displayed line in a box.
and first-line to the top-most displayed line in a box.
p{
font-size: 12px;
}
p::first-letter{
font-size: 20px;
}
p::first-line{
color: red;
}
font-size: 12px;
}
p::first-letter{
font-size: 20px;
}
p::first-line{
color: red;
}
<p>this is first p<br/>this is br in p</p>
<p>this is other p</p>
<p>this is other p</p>
attention
The CSS 3 specs suggest pseudo elements should include two colons, so p::first-line as opposed to p:first-line. This is to differentiate them with pseudo classes. Aiming for backwards-compatibility (whereby older web pages will still work in new browsers), browsers will still behave if they come across the single colon approach and this remains the best approach in most circumstances due to some older browsers not recognizing the double colon.
Before and After Content
The before and after pseudo elements are used in conjunction with
the content property to place content either side of a box without touching the HTML.
the content property to place content either side of a box without touching the HTML.
The value of the content property can be open-quote, close-quote,
any string enclosed in quotation marks, or any image, using url(imagename).
any string enclosed in quotation marks, or any image, using url(imagename).
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW! ";
}
content: "POW! ";
}
p:before {
content: url("http://www.htmldog.com/images/bg.gif");
}
content: url("http://www.htmldog.com/images/bg.gif");
}
The content property effectively creates another box to
play with so you can also add styles to the “presentational content”:
play with so you can also add styles to the “presentational content”:
li:before {
content: "POW! ";
background: red;
color: #fc0;
}
content: "POW! ";
background: red;
color: #fc0;
}
Page Layout
Layout with CSS is easy. You just take a chunk of your page and shove it wherever you choose.
You can place these chunks absolutely or relative to another chunk.
You can place these chunks absolutely or relative to another chunk.
positioning
<div class="big"></div>
<div class="small"></div>
<div class="small"></div>
static
is the default value and renders a box in the normal order of things,
as they appear in the HTML.
as they appear in the HTML.
position: static;
top: 20px;
left: 20px;
(top and left is not use)
top: 20px;
left: 20px;
(top and left is not use)
absolute
is much like static but the box can be offset from its original position
with the properties top, right, bottom and left.
with the properties top, right, bottom and left.
position: absolute;
top: 20px;
left: 20px;
top: 20px;
left: 20px;
relative
pulls a box out of the normal flow of the HTML and delivers it to a world all of its own.
In this crazy little world, the absolute box can be placed anywhere on the page
using top, right, bottom and left.
In this crazy little world, the absolute box can be placed anywhere on the page
using top, right, bottom and left.
position: relative;
top: 20px;
left: 20px;
top: 20px;
left: 20px;
fixed
behaves like absolute, but it will absolutely position a box in reference to the browser window
as opposed to the web page, so fixed boxes should stay exactly
where they are on the screen even when the page is scrolled.
as opposed to the web page, so fixed boxes should stay exactly
where they are on the screen even when the page is scrolled.
子主题
Floating
Floating a box will shift it to the right or left of a line, with surrounding content flowing around it.
float:left
float:right
clear: left
left floated boxes
clear: right
clear right floated boxes
clear: both
clear both left and right floated boxes.
So if, for example, you wanted a footer in your page, you could add a chunk of HTML
#footer {
clear: both;
}
clear: both;
}
And there you have it. A footer that will appear underneath all columns,
regardless of the length of any of them.
regardless of the length of any of them.
0 条评论
下一页