3-Javaweb learning -CSS Cascading Style Sheets
1, CSS (Cascading Style Sheet): Cascading Style Sheets
(1) action:
① beautify the interface
② certain institutional solve the problem of browser compatibility
(2) selector
① tags (elements, inline) Selector: Select the name and label of the same name, the same name as the label will adapt to this style effects.
Code: {name selector
properties: Property Value;
properties: Property Value;
properties:;
......
}
②Class selector: name preceded by the definition of the custom. If you want to adapt elements of this style, you need to add a class attribute to the element.
Code: {name selector
properties: Property Value;
properties: Property Value;
properties:;
......
}
③ID selector: Add defined above selector # id with the value of a name of an element with value, this element will adapt this style.
Code: {name selector
properties: Property Value;
properties: Property Value;
properties:;
......
}
④ pseudo class selector
a:link{
color: red;
}
a:hover{
color: green;
}
a:active{
color: blueviolet;
}
a:visited{
color: #FFA500;
}
解释：
:link 未被访问状态
: hover 鼠标悬停状态
:acitve 激活状态
: visited 访问过后状态
⑤ universal selector
* {
Properties:;
properties: Property Value;
properties:;
......
}
⑥ descendant selectors
div span{
color: #FF0000;
font-size: 20px;
}
.mydiv .myps{
color: orange;
font-size: 30px;
}
<style type="text/css">
div span{
color: #FF0000;
font-size: 20px;
}
</style>
<div>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li><span>列表项</span></li>
</ul>
<p>北冥有鱼<span>其名为鲲</span>！</p>
<span>北冥有鱼</span>
</div>
<span>北冥有鱼</span>
⑦ child selector
div>span{
color: #FF0000;
font-size: 20px;
}
.mydiv>.myps{
color: orange;
font-size: 30px;
}
<style type="text/css">
div>span{
color: #FF0000;
font-size: 20px;
}
</style>
<div>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li><span>列表项</span></li>
</ul>
<p>北冥有鱼<span>其名为鲲</span>！</p>
<span>北冥有鱼</span>
</div>
<span>北冥有鱼</span>⑧ combination selector
div,.myps,#myspan,span{
color: red;
font-size: 40px;
}(3) style attributes
① Text Properties
font-size: 15px; font size
color: # FF0000; font color
font-weight: 700; 100-900 bold bolder bold
font-family: "Times New Roman"; font
text-decoration: underline; text-decoration draw underline underline overline line none no modification line-through strikethrough
text-align: center; text direction left center center left right right of the
letter-spacing: 2px; character spacing
line-height: row height
text-indent: the word of the first line indent
text-shadow : 3px 4px 2px #CCC;
shadow effect, 3px, 4px, 2px emulsion offset value to the Y-axis in the X-axis offset value
#ccc color projection
② box model
box model has four properties:
Content: width and height
border: Border
padding: the packed value (the boundary)
margin: an outer boundary
element actual width = width + padding + border + margin
elements actual height = height + padding + border + margin
box model attributes can be divided into three to four directions provided:
/ border four directions /
border-Top: Groove # 8A2BE2 15px;
border-right: 10px Double Orange;
border-bottom: 2px Dashed # FF0000;
border -left: 20px dotted black;
/*padding 四个方向*/
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
/*padding 设置2个值 上下 左右*/
padding: 25px 35px;
/*padding 设置四个值 上右下左 顺时针*/
padding: 5px 10px 15px 20px;
/*margin 四个方向*/
margin: 60px; /*四个方向一个值*/
margin-top:20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;
/*margin 设置四个值 上右下左 顺时针*/
margin: 20px 30px 40px 50px;
/*margin 设置2个值 上下 左右**/
/*流式布局*/
margin: 50px 60px;
/*水平居中*/
margin: 0px auto;
③Float: floating, rendered elements allows characterized in row-level block elements and block element will remain high and wide. Principle: from the document flow.
(4) style attributes
① modified background properties
background-color: background color
background-image: url (img / back.jpg); background image (background color coverage)
background-REPEAT: NO-REPEAT; background-repeat repeat repeat-x repeat direction -Y
background-position: left Center; background orientation position (horizontal left, vertical centering)
background-position: -183px -66px; background pixel position control, precise features.
background-size: 100% 100% ; background image size
background-size: cover; guarantee covered the background, geometric scaling pictures
background-attachment: fixed; fixed background image
② list of properties
list-style
list-style: none; no presentation point
list-style: disc; presenting dots
list-style: circle; open circles
list-style: square; squares
③ block element attributes
width: 200px; width
height: 100px; height
④display property
display: inline-level elements line
display: inline-block-level elements presented layout line, wherein the block holding elements (width, height)
the display: none element is not displayed, non-spacing
block block-level elements: the display
visibility: hidden; element is not displayed, a placeholder
⑤ transparency
/ attribute value [0-1] 0: completely transparent 1: opaque /
opacity: 0.8;
/*用rgba模式：可以达到底色透明，文字不透明*/
background-color: rgba(125,100,80,0.3);
⑥CSS3 效果
border-radius:10px; border半径
box-shadow:投影
动画：
.gooddiv{
width: 280px;
height: 270px;
background-color: #3385FF;
text-align: center;
padding-top: 10px;
cursor: pointer;
/*注意一定要写*/
transition: all 0.5s;
}
.gooddiv:hover{
/*css3*/
/*X轴 Y轴 平移 */
/*transform: translate(5px,5px);*/
/*旋转 deg度数单位*/
/*transform: rotateZ(180deg);*/
/*放大*/
/*transform: scale(1.2);*/
/*一边放大，一边旋转*/
transform: rotate(360deg) sscale(1.5);
}
(5) Effects tab
①H5 Smart Labels
音频：<audio src="file/陈奕迅 - 红玫瑰 (《白玫瑰》国语版).mp3" controls="controls"></audio>
视频：<video src="video/2.mp4" controls="controls" width="300" autoplay="autoplay" muted="muted" poster="video/2.jpg"></video>
② Scroll
<marquee direction="up" scrollamount="3" width="300" height="300"onmouseover="stop()" onmouseout="start()">
北冥有鱼
<img src="img/banner_2.png" />
<img src="img/banner_3.png" />
</marquee>
(6) Float and display: inline-block of difference
Float from the document flow, a suspension onto a page, the text surrounding a display.
display: inline-block, not from the document flow, accounting for inline position.
(7) the effect of the mouse
cursor: pointer; effect-hand mouse
cursor: url (img / menghuan.ico) , auto; mouse results look like the picture
(8) Other properties
Overflow: visible show
hidden hide
atuo auto-
scroll slide
(9) postion: location attribute
①absolute generate an absolute positioning element relative to the first parent element is positioned outside the static positioning.
Position of the element by "left", "top", "right" and "bottom" predetermined attribute. Documents from the absolute flow.
②fixed generate absolute positioning of elements, positioned relative to the browser window.
Position of the element by "left", "top", "right" and "bottom" predetermined attribute. fixed from the document flow.
③relative generating element relative positioning, positioning relative to its normal position. Therefore, "left: 20" adds 20 pixels to the element's LEFT position.
It does not flow out of the document, the relative position of the original document stream for relative displacement.
④static default. No positioning element occurs in the normal flow (ignoring top, bottom, left, right or z-index statement).
⑤inherit provisions should inherit the value of the position property from the parent element.
⑦static: Static positioning is the default position of the element box generated normally, that is the normal display when no positioning.
