Day4
Today continue css content, introduces a variety of settings css property.
The day before yesterday made a deposit into draft forgotten. . .
1. Set the text property
font-family: Sets the font (the default Times New Roman, the default title is in bold)
font-weight: bold font settings are normal (normal default font), bold (bold font) custom thickness
font-size: Set the font size unit px
font-style: set the font is italicized normal (normal font), italic (x italics)
color: the color of the font (the color values may correspond to English, and may be the hexadecimal value of the color)
Height setting label: line-height
text-align: setting the value of the text display position left, center (center left), right
text-decoration: underline disposed
underline (the lower position), line-through (through the middle), overline (a)
none default underline removed
text-indent: Set the distance first line indent, the unit em or px
//
Letter-spacing: Set the character spacing
word-spacing: Set word spacing
text-transform: setting letter case change
corresponding to the three attribute values
UPPERCASE (all uppercase letters output)
lowercase (all lowercase letters converted output)
capitalize (all letters capitalized to convert all remaining output maintain the status quo );
//
text-shadow (shaded text): h-shadow v-shadow blur color;
h-shadow: Required. Horizontal position of the shadow. Allow negative.
v-shadow: Required. The vertical position of the shadow. Allow negative.
blur: Optional. Fuzzy distance.
color: Optional. Color of the shadow.
text-shadow: 2px 2px 1px gray;
/*水平 垂直 模糊度 颜色 */
box-shadow (shaded box): the label is shaded, as attributes, and text-shadow.
box-shadow:2px 2px 1px red ;
Results are as follows:
2. Border property set
Any label can be painted border
Direction setting frame, top (upper), bottom (lower), left (left), right (R)
method one:
Left as an example to explain instructions border
border-left-width: the width of the border set (thickness of the border decision unit PX)
border-left-style: border style setting
decide what type of frame:
// Solid: Real line border
// dashed: dotted border
// double: double solid line border
// dotted: dotted line border
border-left-color: set the color of the border
Second way:
border-left: Color Border Style Border width; and
no relationship with three order of attributes
such as:
div img{
border-left: solid 5px red;
}
with
div img{
border-left: 5px red solid;
}
The effect is the same
If you want to set up four border show the same effect:
border: Color Border Style Border width of;
Rounded border
border-radius:0px 0px 0px 0px;
/*四个属性分别是左上，右上，右下，左下的圆角半径*/
If the radius of the same four border-radius: 10px, equivalent to border-radius: 10px 10px 10px 10px;
To set a border circle, the first requirement is a square tag, or set width, and heightthe same;
then set border-radius:to half the width of the label (to calculate the width of the upper side), or 50%.
div .circle{
border-radius: 50%;
/*如果标签的边的宽度为20px，边框宽度为1px*/
border-radius: 11px;
}
3. Set the background image of the relevant properties
background-color: set the background color
background-image: url ( "relative position of the image resource"); set the background image
background-repeat: setting a background image may be repeated if
no-repeat: not repeat
repeat: the background image to fill the entire label default values
repeat-x: horizontal filling background image
repeat-y: the background image is filled in the vertical direction
position-background: ThI, Th2;
ThI: horizontal distance
from the vertical direction: th2
具体实例：
background-color: palegreen;
background-image: url(“images/grape.jpg”);
background-repeat:no-repeat;
background-position: 0px 0px;
Such may be provided :
background: URL ( "the relative position of the image resource") no-repeat 0px 0px;
Convenient
You can also add color:
background: Red url ( "relative position of the image resource") no-repeat 0px 0px;
but the background image will completely cover the background color
Sized Background :
background-size: Cover;
length: set the background image height and width.
Setting a first value width, the height of the second set value. If only one value is given, the second is set to auto (automatic)
percentage: The percentage is calculated with respect to the positioning of the background area.
Setting a first value width, the height of the second set value. If only one value is given, the second is set to "Auto (Auto)"
cover: In this case the image will maintain the aspect scaled to the minimum size to completely cover the location area ratio and the background image.
contain: at this time will be scaled to maintain the aspect of the image for the maximum size of the background image and the location area ratio.
4. A list of relevant property (property list of ordered and unordered)
list-style-type: none styled small icon (remove the original icon)
list-style-position: position setting icon displayed
Inside (small icon is provided on the inside of li), outside (small icon is provided outside of the li)
list-style-image url ( "the relative position of the icon"): Custom icon (FIG using the new
previous chip symbol instead of a list, first set the original icon to none)
list-style-type: none;
list-style-image: url("images/list.gif");
list-style-position: outside;
Can also :
List-style: set a style icon, and set the position of the small icon displayed custom icon
list-style:none url("images/list.gif") outside;
The set of attributes associated table
Table borders
Single border properties: border-collapse: collapse;
If you simply just set the border in the table in
table {
border: 1px solid;
}
This will happen
but if you add a border to tr td, it will:
table tr td{
border: 1px solid;
}
Therefore, we need a single border properties:
table {
border-collapse: collapse;
}
You can get a normal table borders:
Form Center:
margin: 0px auto; (about margin will explain in a box model)
6. Set dummy class dependent properties
a: link Hyperlink setting the initial state attribute
a: when the property is set to hover the mouse into the corresponding hyperlink
// now do not use a lot of browsers do not support
a: active when the mouse to click on the corresponding hyperlink property to
a: visited property is set when the corresponding hyperlink is accessed after completion
Specific examples:
a:link{
color:mediumpurple;
text-decoration: none;
background-color: palegoldenrod;
}
a:hover{
color: red;
text-decoration: underline;
background-color: orange;
}
a:active{
color: greenyellow;
}
a:visited{
color:black;
}
For the first two
normal:
Move to:
7. box model
3D illustrates a page
order from top to bottom are: content (Content) -> background-image-> background -color
so that, when a tag to set a background image and background color while background image will cover the background color
Inside and outside the margin settings (focus)
Units are PX:
margin-Top: on outside of the Settings tab from the
margin-left: left outside of the Settings tab from the
margin-bottom: under the Settings tab from the outside
margin-right: the right of the Settings tab from the outside
padding-left: the left margin setting tag
padding provided on the label: Top-padding
padding-bottom: a tag disposed within the margins
padding-right: right inner margin settings tab
margin th1 th2 th3 th4;
margin: 10px 20px 30px 40px; /*上右下左*/
And
padding: th1 th2 th3 th4;
Provided respectively, the right, lower, left margins or padding
margin: th1 th2 or padding: ThI Th2
ThI: setting upper and lower margins or padding
th2: setting left and right margins or padding
margin: th; or padding: th;
provided on, down, left, or right inner margin Margin
Important conclusion
The distance between two rows level tags: Margin is the sum of
the distance between the two block-level tags: whichever is the greater between those 2
About body
Before you can create a page generally must first remove the distance between the body and the pages:
<style type="text/css">
/* margin:0px; 上下左右边距都为0px
padding:0px;*/
body{
margin: 0px;
padding: 0px;
}
</style>
8.CSS float (for div)
float float
left, right direction provided float
Use of the float features: block level for the label. Once the set of floating property
(1). Then the block-level adaptive label size (according to their content + padding space occupied by the browser)
(2) This block will not be dependent on the level of the parent tag of the block, i.e., it is margins of setting this block-level tag does not affect the original brothers label
(3) floating block-level tag inside the label does not cover other text messages, but in addition to other text messages will be affected
Scavenging floating
clear: left (left clear float),
right (clear floating right),
both-(clear floating around)
If you do not know, a more detailed description we can look at this
https://www.w3school.com.cn/css/css_positioning_floating.asp
, speak very clearly.
9.position positioning
Divided into: Absolute (absolute positioning), relative (relative positioning)
static (no positioning) Fixed (fixedly positioned)
specific format:
Using the absolute value of the positioning features set position:
. (. 1) then the block-level adaptive label size (according to their content + padding space occupied by the browser)
. (2) This block will not be dependent on the level of the parent tag of the block that is, the margins set this block-level tag does not affect the original brothers label. . .
(3). Left and top, and other related properties set margins are set relative to the browser or body concerned, and will overwrite the original text
Set value of the positioning using the position relative characteristics:
essentially perform a translation relative original position, and then appended to the parent tag of any of this block.
the difference between the fixed and absolute:
absolute: absolute positioning, will be accompanied by a change in the position of the scroll bar
fixed: fixed positioning, movement and position along the scroll bar will not change
