搜索到
2
篇与
的结果
-
-
【Web】CSS常用内容及解释 CSS 选择器 基本选择器grif *通配符：匹配所有的html标记，所有吊机都会改变的 标签选择器：将其匹配指定的html标记 class选择器：给一类HTML标记加样式。这里所指的“一类”是：每个HTML标记都有一个class属性，且class的值一样。class属性是公共属性，每个HTML标记都有 id选择器：给指定id的元素添加样式。网页中HTML标记的id属性的值，必须是唯一的。 组合选择器 多元素选择器：给多个元素加同一个样式，多个选择器之间用“，”隔开 后代选择器 给某个标签的某个后代元素加样式，选择器之间用空格隔开 子元素选择器：给某个元素的子元素添加样式举例：div > h1.title{color:red;} css尺寸属性 width：元素宽度，一定要加px单位 height：元素高度 css字体属性 font-size:字体大小 font-family:字体 font-style:斜体，取值：italic font-weight:粗体，取值，bold css文本属性 color:文本颜色 text-decoration:文本修饰线，取值：none(无)，underline(下划线)，overline(上划线)，line-through(删除线) text-align:文本水平对齐方式，取值：left,center,right line-height:行高，可以用固定值，也可以用百分比 text-indent:首行缩进 letter-spacing:字间距 CSS选择器——基本选择器(单个选择器) 1，通配符“*”：将匹配所有的HTML标记，只要<body>中存在的标记都会生效。 2,标签选择器：对应于HTML标记，有什么样的HTML标记，就有什么样的标签选择器。如：p{color:red;} 3，类选择器：给HTML标记中，class属性值相同的元素，添加样式。命名必须以“.”开头。如：.news{} 4，Id选择器：给HTML标记中，具有id属性的元素，添加样式。唯一性。命名以“#”开头。如：#news{} CSS选择器——组合选择器(多个选择器) 1，多元素选择器：同时给多个元素添加样式，各个选择之间用逗号“,”分开。如：p,h1,#box{} 2，后代元素选择器：给某个元素的所有后代元素，添加样式。用空格隔开。如：#box h1{} 3，子元素选择器：给某个元素的子元素添加样式。用“>”隔开。如：#box > h1{} 一个超链接，有四个状态： 正常状态(:link)：鼠标没放上之前链接的样式。 放上状态(:hover)：鼠标放到链接上时的样式。 激活状态(:active)：按住鼠标左键不松开的样式，这个状态特殊短暂。 访问过的状态(:visited)：按下鼠标左键，并弹起，这时的样式效果。 在平常工作中，会使用以下写法，来给链接加不同的样式： a:link, a:visited{ color:#444; text-decoration:none; } //将“正常状态”和“访问过的状态”合二为一。 a:hover{ color:#990000; text-decoration:underline; } //“鼠标放上”单做一种效果 list-style:列表样式，取值：none。去掉项目符号或者编号前面的各种符号 ul li{list-style:none;/*去除前面的符号*/} css边框属性 border-left:左边框线 格式：border-left：粗细 线型 线的颜色 线型：none(无线) solid（实线） dashed(虚线) dotted(点状线) 举例：border-left:5px dashed red; border-right:有边框 border-top:上边框 border-bottom：下边框 /*行内元素没有width和height属性 块级元素才有width和height的属性 */ css内边距属性 padding-left:左内填充距离，左边先到内容间的距离 padding-right:右内填充距离，右边线到内容间的距离 padding-top:上内填充距离，上边线到内容间的距离 padding-bottom：下内填充距离，下边线到内容间的距离 缩写形式 padding：10px;//四个边的内填充分别为10px padding:10px 20px;//上下为10px,左右为20px padding:5px 10px 20px;//上为5px,左右为10px,下为20px padding:5px 10px 15px 20px; //循序是：上右下左（顺时针） css外边距属性 margin-left:左边线往外的距离 margin-right：右边线往外的距离 margin-top:上边线往外的距离 margin-bottom；下边线往外的距离 简写形式 margin:10px;//四个外边距分别为10px margin:10px 20px;//上下外边距10px,左右外边距20px margin:5px 10px 15px;//上外边距5px,左右外边距10px,下外边距15px margin:5px 10px 15px 20px;//上右下左（顺时针方向） css背景属性 background-color:背景颜色 background-image:背景图片 例：background-image:url(路径) background-repeat:背景平铺方式。取值no-repeat(不平铺)，repeat-x(水平方向)，repeat-y(垂直方向) background-position:背景定位，格式：background-position:水平方向定位，垂直方向定位 英文单词定位：background-position:left|center|right top|center|bottom; 用固定值定位：background-position:50px 50px;//背景距离容器的左边50px，容器的顶端50px 用百分比定位：background-position:50% 50%;//水平居中，垂直居中 用混合定位：background-position：left 10px;//背景靠左边齐，距离容器顶端10px 简写方式： background:背景色 背景图 平铺方式 定位方式 举例：background:url(images/bg.gif) no-repeat center center; 举例：background: #ccc url(images/bg.gif) no-repeat left 10px; css浮动和清除 float:让元素浮动，取值：left(左浮动)，right(右浮动) clear:清除浮动，取值：left(清除左浮动)，right(清除右浮动)，both(同时清除上面的左右浮动) 1、CSS浮动 浮动的元素，将向左或向右浮动，浮动到包围元素的边上，或上一个浮动元素的边上为止。 浮动的元素，不再占空间了，并且，浮动元素的层级要高于普通元素。 浮动的元素，一定是“块元素”。不管它原来是什么元素。 如果浮动的元素，没有指定宽度的话，浮动后它将尽可能的变窄。因此，浮动元素一般要定宽和高。 一行的多个元素，要浮动一起浮动 2、CSS清除浮动 CSS清除浮动的功能有两个：(1)可以包围元素从“视觉上”包住浮动元素(2)清除之下的其它元素将恢复默认排版。 有浮动，就得有清除。 如果包围元素指定了高度了，那么可以不使用清除功能。 css优先级 行内样式》id选择器》class选择器》标签选择器 display属性 功能：规则网页元素如何显示的问题 取值：none(隐藏)，block（一块级元素显示），inline(以行内元素显示) block:可以实现将行内元素转换成块级元素 inline:可以实现将块级元素转换成行内元素 overflow属性：当内容溢出时，该如何显示 取值：visible(可见)，hidden（隐藏），scroll(出现滚动条)，auto（自动） cursor光标类型 取值：text(文本)，help(帮助)，wait（等待），pointer(手型)等。 css定位 position：元素定位方式 static:静态定位（默认状态，不定位）； fixed:固定位置 relative:相对定位 absolute:绝对定位 定位方式要与定位属性配合使用 定位坐标：指定定位的元素，偏移目标元素多远的距离 left:定位元素，距离目标元素左边的距离 top:定位元素，距离目标元素上边的距离 right:定位元素，距离目标元素右边的距离 bottom：定位元素，距离目标元素下边的距离 css表格属性 border-collapse:表格边框线合并，取值：collapse 全局css设置 1、清除所有的标记的内外边距 body,ul,li,a,img,p,input{ margin:0; padding:0; } 2、去除项目符号或编号前面的符号 ul,ol,li{ list-style:none; } 3、全局链接效果 a:link , a:visited{color:#444;text-decoration:none;} a:hover{color:red;} 4、网页中所有的文字大小颜色 body{ font-size:12px; font-family:宋体; color:#ccc; } 5、去除图片的链接边框线 img{border:0;} 6、全局的类样式 .floatL{ float:left; } .floatR{ float:right; } .clear{clear:both;} .blank10{ height:10px; clear:both; } .red{ color:red; } .blue{ color:blue; }
