html5 css3中的一些笔记
生活随笔
收集整理的這篇文章主要介紹了
html5 css3中的一些笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" ><title>css選擇器</title><style type="text/css">/* HTML 文檔css:root{ border: solid 1px red ;};*//*字選擇器 帶>號 也可以不用帶*//*ul > li{color: red;}*//*ul > li:first-child{color: red;}ul > li:last-child{color: red;}*//*輸入框的啟用和禁止輸入的CSS*//*input:enabled{border: 1px solid red;}input:disabled{border: 1px solid blue;}*//*驗證成功就顯示blue,驗證不成功顯示green*//*input:valid{border: 1px solid blue;}input:invalid{border: 1px solid green;}*//*必填表單 和 不必填表單*//*input:required{}input:optional{}*//*1. 顯示 2.訪問過后的顯示 3.鼠標移動 4.點擊不動后的顯示*//*a:link{}a:visited{}a:hover{}a:active{}*//*獲取光標時 谷歌不兼容*//*input:focus{border: 1px solid red;}*//*a標簽 href!=baidu 的a元素*//*a:not([href*="baidu"]){color: red;}*//*em是相對的 跟字號大小掛鉤,很靈活*/p{margin: 0;padding: 0;background: gray;font-size: 20px;width: 50%;}</style>
</head><body><ul><li>ul第1個子元素</li><li>ul第2個子元素</li><li>ul第3個子元素</li><li>ul第4個子元素</li></ul><input type="text" /><input type="email" /><br/><a href="http:www.baidu.com" >baidu</a><a href="http:www.google.com" >google</a><a href="http:www.haosou.com" >haosou</a><p>em單位的講解em單位的講解em單位的講解em單位的講解em單位的講解</p>
</body>
</html>
/*
display重要的概念
塊級元素(display: block;) 1.能設置大小（height,width）2. 能自動的換行 div p
內聯元素(display: inline;) 1.不能設置大小 2.不能自動換行 span b
內聯-塊(display: inline-block;) 1.能設置大小 2.不能自動換行 img
float浮動 理解：如果有div A,B。 A浮動B不浮動，相當于水下面的物體A浮動起來，然后在A后面的B就會跑到A的位置，A就會浮動到水面上，則就會擋住B。就相當于div A凸起來了，B就跑到A原來的位置了、
clean 為了下面的元素不受上面元素的浮動干擾，可以使用
clean:left|right|both; (清除浮動)
*/
?
div{width: 400px;height: 300px;/*css3中的透明度*/opacity: 0.5; border: 10px solid green;/*陰影效果1. 左右陰影 正是右邊 負是左邊2. 上下3. 陰影的模糊值 默認是04. 陰影的延伸半價5. 顏色（可選）6. inset值 （可選，內陰影）*/box-shadow: 5px 5px 5px 5px;/*輪廓*/outline: red solid 1px;}/*em 和 rem單位的用法，都是相對的*/html{font-size: 10px;// 等價于 6.25% (默認字體大小16px,10/16)}.p1{font-size: 1.7em; // em 相對于父元素的字體大小}.p2{font-size: 17px; }.p3{font-size: 1.7rem; // rem 直接相對于根目錄（設置html的字體大小）}?
轉載于:https://www.cnblogs.com/shaoshao/p/4641261.html
總結
以上是生活随笔為你收集整理的html5 css3中的一些笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python subprocess使用记
- 下一篇： MyBatis知多少（6）表现层与业务逻