CSS font and text style
Text: color, font size, font, bold, etc.
Text: line height, alignment and text decoration, etc.
Text style attributes:
font-family
font-size
color
font-weight
font-style
在html4.0之前，可以用font，但4之后就不用了
<font face="宋体" color="red" size="12px">hiii</font>
<style>
h1{
font-family:"宋体"，"Times New Roman";}
</style>
Now use css style instead of font tag
font-size
Relative unit:
px pixel Affected by monitor resolution
in/% em and% are set size for the parent element
Absolute size, cannot change with the browser resolution or the size of the parent element
color defines the color of the text in the element
color |RGB|#ffffff
color:red;
color:rgb(33,43,34); number 0~255 percentage is 0%-100%
color:#fff; #beginning, 6 digits: 0 ~f can be abbreviated to 3 digits, not case sensitive
Font
-weight:
normal | bold | bolder | lighter | 100~900
In fact, bold and bolder display basically the same effect, 100~600 is the same, 700-900 is also the same. The
default is normal, which is equivalent to 400 and 700 is equivalent to bold
斜体：
font-style
normal italic oblique
font-variant font deformation
Set the text in the element to small capital letters normal | small-caps
text-align is usedBlock element
Set the horizontal alignment of the text within the element :
attribute values:
left, right, center, justify
If you want the image to be aligned in the center , you need to nest a block-level element such as div outside
If you want to display in the center under different browsers, and the text in the p tag under the div is centered, you must
<style>
.first{
text-align:center;}
.first p{
width:50%;margin:0 auto;}
</style>
<div class="first">
<p> fsadfasdfasdfsa</p>
</div>
vertical-align property Only effective for inline elements
Content of the element is provided vertically
baseline, sub, super, top, text-top, middle, bottom, text-bottom, the length, the percentage of positive negative distinction
centered vertically applied
single-line vertical center:
Line-height and height as large
text -align:center;
Multi-line text is vertically centered:
Inline elements cannot be placed in block-level elements
Add display: table to the parent element; add to the
center element:
vertical-align:middle;
display:table-cell;
The line-height attribute is used to set the height and
length of the text line in the element. The percentage
will overlap when the line height is 16px less than the font size 20px.
It is recommended to use em as the unit of row height, So that
em and% will not overlap with font size
text-index: 2em; top grid
When the line height is set to be the same as the font size, or 1em or 100%, the distance between the lines becomes smaller, and the browser has a default line height, Chrome is 16px
line height can be inherited
Inherited is the calculated value , instead of directly inheriting the em or% value, there may be overlap when the font size> line height
Text style attributes:
word-spacing set the spacing between words in the elementUse spaces as standard
letter-spacing Set the spacing between the letters in the element. The
value can be set as positive or negative, and the unit can be em, %, px, etc.
text-transform Set the case of the text in the element: capitalize, uppercase, lowercase, none
text-decoration Set the decoration of the text within the element.
Underline, overline, line-through, blink, none
blink have compatibility issues
Cannot inherit
application
<style>
p{
background-color:#ececec;height:150px;text-align:center;line-height:150px;}
.one{
font-size:80px;color:#c9394a;font-weight:bold;}
.two{
font-size:40px;color:gray;text-decoration:underline;letter-spacing:5px;vertical-align:15px;}
.three{
font-size:80px;color:gray;font-style:oblique;}
</style>
<p><span class="one">郑乾</span><span class="two">小白啊</span><span class="three">!</span></p>
to sum up:
Webpage production from the whole to the part,
with the help of manuals and the Internet
文字样式
font-family
font-size
color
font-weight
font-style
text-align
line-height
vertical-align
word-spacing
letter-spacing
text-transform
text-decoration
NEXT:
CSS background and list
