前端学习之-Css

时间 2019-11-19
标签前端学习 css 栏目 CSS 繁體版
原文原文链接
CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，                                可使网页的表现与数据内容分离。css的四种引入方式:1.行内式<p style="hello yuan</p>2.嵌入式<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        p{            font-style:italic;">#2b99ff;        }    </style></head>3.连接式<link href="mystyle.css" rel="stylesheet" type="text/css"/>4.导入式< styletype = "text/css" >@import"mystyle.css";此处要注意.css文件的路径< / style >　css的选择器（Selector）1 基础选择器＊ :通用元素选择器，匹配任何元素   * { margin:0; padding:0; }E  :标签选择器，匹配全部使用E标签的元素   p { color:green; }.info和E.info: class选择器，匹配全部class属性中包含info的元素   .info { background:#ff0; }#info和E#info  id选择器，匹配全部id属性等于footer的元素         #info { background:#ff0; }2 组合选择器div,p  多元素选择器div p 后代选择器div>p 子代选择器div+p 毗邻选择器3 属性选择器E[att]   匹配全部具备att属性的E元素，不考虑它的值。（注意：E在此处能够省略，好比“[cheacked]”。如下同。）        p[title]{color:  # f00; }E[att = val]  匹配全部att属性等于“val”的E元素        div[class =”error”] {color:  # f00; }E[att~ = val]    匹配全部att属性具备多个空格分隔的值、其中一个值等于“val”的E元素    td[class ~=”name”] {color:  # f00; }E[attr ^= val]    匹配属性值以指定值开头的每一个元素    div[class ^="test"]{background:  # ffff00;}E[attr$=val]    匹配属性值以指定值结尾的每一个元素    div[class $="test"]{background:  # ffff00;}E[attr *= val]    匹配属性值中包含指定值的每一个元素    div[class *="test"]{background:  # ffff00;}4 伪类(Pseudo-classes)a:link（没有接触过的连接）,用于定义了连接的常规状态。a:hover（鼠标放在连接上的状态）,用于产生视觉效果。a:visited（访问过的连接）,用于阅读文章，能清楚的判断已经访问过的连接。a:active（在连接上按下鼠标时的状态）,用于表现鼠标按下时的连接状态。伪类选择器 : 伪类指的是标签的不一样状态:           a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态CSS的经常使用属性 :1  颜色属性< div style = "color:blueviolet" > ppppp < / div >< div style = "color:#ffee33" > ppppp < / div >< div style = "color:rgb(255,0,0)" > ppppp < / div >< div style = "color:rgba(255,0,0,0.5)" > ppppp < / div >2  字体属性font - size: 20px / 50 % / largerfont - family:'Lucida Bright'font - weight: lighter / bold / border /< h1 style = "font-style: oblique" > 老男孩 < / h1 >3  背景属性font-weight:bold;">'1.jpg');background-repeat: no-repeat;(repeat:平铺满)background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)4  文本属性font-size: 10px;text-align: center;   横向排列line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效text-indent: 150px;   首行缩进letter-spacing: 10px;word-spacing: 20px;text-transform: capitalize;5  边框属性border - style: solid;border - color: chartreuse;border - width: 20px;简写：border: 30px rebeccapurple solid;6   列表属性ul,ol{   list-style: decimal-leading-zero;         list-style: none; <br>         list-style: circle;         list-style: upper-alpha;         list-style: disc; }7  dispaly属性dispaly:none        block        inline        inline-block8  外边距和内边margin border padding left right bottom topmargin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。padding:           用于控制内容与边框之间的距离；Border(边框)       围绕在内边距和内容外的边框;Content(内容)      盒子的内容，显示文本和图像。9 float属性clear语法：clear : none | left | right | both取值：   none : 默认值。容许两边均可以有浮动对象        left : 不容许左边有浮动对象        right : 不容许右边有浮动对象        both : 不容许有浮动对象可是须要注意的是：clear属性只会对自身起做用，而不会影响其余元素。若是一个元素的右侧有一浮动对象，而这个元素设置了不容许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。10 position(定位)1 staticstatic 默认值，无定位，不能看成绝对定位的参照物，而且设置标签对象的left、top等值是不起做用的的。2  position: relative／absolute             relative 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以本身原始位置为参照物。             absolute 绝对定位。其层叠经过z-index属性定义。3  position:fixed            在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，            它都会固定在这个位置。