一:css样式编写3种方式
1.内联样式(inline):使用style属性声明在元素中
eg: <div style=" "> </div>
2.内部样式(inner):写在style标签里
eg:<head><style type="text/css">...</style></head>
3.外部样式(outer):创建一个独立的.css文件
<head>
<link rel="styleSheet" type="text/css" href="x.css"/>
</head>
3种方式的使用原则:
(1)内联样式只对当前元素有效;内部样式对当前整个页面有效;外部样式对所有引用它的页面都有效(可用于控制全站的风格)
(2)内联样式尽量少用;内部样式可以适量使用(全站中只有一个页面中使用的样式)推荐使用外部样式(外部文件不要太多)。
补充:css样式的优先级
!important>内联样式>内部/外部样式(#ID选择器>类选择器/伪类选择器>元素选择器)>浏览器预定义样式
二.css基本语法:
属性名:属性值;
内部/外部css:
选择器{
属性名:属性值;
...
属性名:属性值;
}
(一)CSS选择器(重点)
1.基本选择器:(说明:javascript/jquery中也可以使用类似css中的选择器进行元素的选择)
(1)通用选择器:*{...} 选择页面中的所有元素(所有页面几乎都要写这个,不写就默认,浏览器不同,所有默认值就不同);
eg: *{margin:0;
padding:0;
}
(2)元素选择器:元素名{...} 选择指定的元素 eg: div{...} ,p{...} 等元素;
(3)ID选择器: #ID值{...} 仅选择具有指定ID的元素;
(4)类别选择器: .类名{...} 选择具有指定class的所有元素
(5)并列/过滤选择器:选择器1选择器2{...} 选择可被两个选择器同时选定的元素
(6)父子选择器:选择器1 选择器2{...}选择可被选择器1选择的元素下的所有子元素中可被选择器2选中的元素。
(7)直接子元素选择器:选择器1>选择器2{...}选择选择器1中的直接子元素中可被选择器2选中的元素( IE6不支持)
(8)多选选择器:选择器1,选择器2,...选择器n{...}选择可被任何一个选择器选中的元素
(9)伪类选择器: :伪类名{...}
1)连接伪类
: link,适用于尚未访问的链接
eg: a:link{color:#004276;
text-decoration:none;
}
:visited,适用于访问后的链接
a:visited{
color:#004276;
}
2)动态伪类
:hover ,适用于鼠标悬停在HTML元素时,div、p、a等元素都可用
eg: a:hover{color:#BA2636;
text-decoration:underline;
}
div:hover{
color:#BA2636;
border:1px solid red;
}
3)动态伪类
:active,适用于HTML元素被激活时(鼠标点击放开后)
eg: a:active{color:yellow;
}
4)动态伪类
:focus,适用于HTML元素获取焦点时
eg: input:foucs{border:1px solid red;
}
5)目标伪类选择器(ie8不支持)
:target,目标元素的选定
<head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> a:target{border: 2px solid #f00;} div{display:none;} div:target{border: 2px solid #f00; display:block; } </style> </head> <body> <a href="#lian1">链接1</a> <a href="#lian2">链接2</a> <a href="#lian3">链接3</a> <a href="#lian4">链接4</a><br/> <a name="lian1">锚点1:链接1的目标元素</a> <div id="lian2">锚点2:链接2的目标元素</div> <div id="lian3">锚点3:链接3的目标元素</div> <div id="lian4">锚点4:链接4的目标元素</div> </body> </html>
6)状态伪类(一般用于表单,更多用于js)
:enabled input:enabled{...} 匹配当前启用的表单元素
:disabled :disabled{...} 匹配当前禁用的表单元素
:checked :checked {...} 匹配当前选定的表单元素
<head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> input:enabled{ border:1px solid #ff0000; } :disabled{ background-color:aqua; } :checked{ box-shadow:6px 6px #666; } </style> </head> <body> <form action="" > <label for="t1">用户名:<input type="text" name="text1" id="t1"></label><br/> <label for="p1">密 码:<input type="password" name="password1" id="p1"></label><br/> <input type="radio" name="x1">男 <input type="radio" name="x1">女<br/> <select> <optgroup label="地址"> <option value="cq">重庆</option> <option value="gz">广州</option> <option value="sh">上海</option> </optgroup> </select><br/> <textarea>请输入你的签名...</textarea><br/> <input type="checkbox">我同意就接受此条款<br/> <input type="submit" value="提交" disabled="true"> <input type="reset" value="重置"> </form> </body> </html>
7) 结构伪类
:last-child p:last-child{...} 匹配所有同级中的最后一个p元素
p :last-child{...} 匹配p下最后一个子元素
:only-child p:only-child{...} 匹配所有同级中的唯一的一个p元素
:first-child div: first-child{...} 匹配父元素中的第一个子元素(必须是标签,纯文本不算)
:empty div:empty{display:none;} 匹配没有子元素的元素(且没有任何文本内容的元素)
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> div :first-child{ border:1px solid #ff0000; } div:first-child{ background-color:aquamarine; } div :only-child{ padding: 10px; } </style> </head> <body> <div id="div1"> <p>文本1</p> <p>文本2</p> <span>文本3</span> <div> <p>文本4</p> </div> </div> <div id="div2"> 12343345 <span>文本8</span> <p>文本5</p> <p>文本6</p> <span>文本7</span> <p>文本8</p> </div> <div> <div>div1</div> </div> </body> </html>
2.css复杂选择器:(提示:使用jquery可以兼容所有下述复杂选择器;复杂选择器的使用可以减少页面中id和class的出现频率。)
复杂选择器 | 示例 | 含义 | 版本/兼容性 |
选1 选2 | div ul{...} | 子代选择器 | css1 |
选1>选2 | div>ul{...} | 直接子代选择器 | css2 |
选1+选2 | input+span{...}对紧跟在input后的一个span设样式 | 相邻兄弟选择器:选择紧挨着的下一个兄弟元素(选中0/1个) | css2 /IE6不支持 |
选1~选2 | div~span{...}查找某一个指定元素的后面的所有兄弟节点。 | 通用兄弟选择器:匹配选择器1的兄弟元素中匹配选择器2的元素。 | css3 注意:div后的兄弟会选定,之前的不会。 |
[属性名] | [href]{ text-decoration:none; color:red; } |
选择具有指定属性的元素 | css2 |
[属性名=属性值] | [type="text"]{ border:2px solid green; } |
匹配具有指定属性且属性值为指定值 | css2 |
[属性名~=属性值]必须出现完整单词 | [class~="strong“]{...}可以选定引号内出现了strong这个单词的 | 匹配具有指定的属性且属性值中包含指定的单词。(必须是完整的单词,不是单词不行) | css3 |
[属性名*=属性值] 只需要出现指定字母 |
[class*=str]可以选定引号内出现了str这三个字母的 | 匹配具有指定的属性且属性值中包含指定的字母组合(不必是完整的单词) | css3 |
[属性名^=属性值] 头(字母) |
[class^=str] | 匹配具有指定的属性,且属性值以指定的字母开头 | css3 |
[属性名$=属性值] | [class$=str] | 匹配具有指定的属性,且属性值以指定的字母结尾 | css3 |
[属性名 |=属性值] | [class |=str] | 匹配具有指定的属性且属性值以指定的完整的单词开头(不能是字母) | css3 |
3.内容生成选择器
XHTML规定:页面内容交给标签来处理;页面表现交个css来处理。但css3有些“内容生成”选择器不单单可以呈现样式,还可以向页面中添加内容。
(1)选择器1:before{
......
content:存文本/图像/计数器;
}
(2) 选择器1:after{
......
content:存文本/图像/计数器;
}
content属性必须配合:before/after选择器使用。
案例:
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> /*p:before{ content:'子曰:'; }*/ p:after{ content:'--摘自《论语》'; } body{ counter-reset:MyCount1 -1; } p:before{ content:'<'counter(MyCount1)'>'; } p{ counter-increment:MyCount1 2; } </style> </head> <body> <p>鹅,鹅,鹅,</p> <p>曲项向天歌;</p> <p>白毛浮绿水,</p> <p>红掌拨清波。</p> </body>(3)利用内容生成选择器还可以解决
1)解决父元素的一个子元素的margin-top越界问题
为父元素添加前置内容:
.parent:before{
content:' ';
display:table;
}
2)解决所有的子元素浮动后父元素高度为0,且影响后续元素问题
为父元素添加后置内容生成:
.parent:after{
content: ' ';
display:table;
clear:both;
}
案列2
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .parent1 { width: 400px; height: 200px; background: #faa; } .parent2 { width: 400px; height: 200px; background: #afa; /*border-top: 1px solid #000;*/ /*padding-top: 1px;*/ /*overflow: hidden;*/ } .parent2:before { content: ' '; display: table; } .child2 { width: 200px; height: 100px; background: #aaf; margin-top: 20px; } p:before { content: '子曰:'; color: red; margin-right: 5px; display: inline-block; } p:after { content: '——摘自论语'; color: #aaa; font-style: italic; } hr { margin: 0; } </style> </head> <body> a<table></table>b <h1>第一个子元素的margin-top越界问题</h1> <div class="parent1"></div> <div class="parent2"> <div class="child2"></div> </div> <hr> <p>三人行必有我师</p> <p>学而时习之不亦说乎</p> <p>有朋自远方来不亦乐乎</p> <br><br><br><br><br><br><br><br><br><br> </body> </html>
案列3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .parent { width: 600px; /*height: 400px;*/ background: #faa; } .parent:after { content: ' '; display: table; clear: both; } .child1 { width: 200px; height: 150px; background: #afa; float: left; } .child2 { width: 200px; height: 150px; background: #aaf; float: left; } </style> </head> <body> <h1>子元素浮动对父元素、后续元素造成的影响</h1> <div class="parent"> <div class="child1">1111</div> <div class="child2">2222</div> </div> <hr> <br><br><br><br><br><br><br><br><br><br> </body> </html>(二)css常用属性——重点
(1) width/height 指定元素的宽高(block,img,table元素才可以) 单位:% px em (2) min-width/height 定义元素的最小宽高
(3) max-width/height 定义元素的最大宽高
(4) overflow 规定当内容溢出元素框时发生的事情
* visible:默认值,内容不被修剪。
* hidden:内容会被修剪,并且其余内容不可见。
* scroll:内容会被修剪,出现滚动条可以看其他内容。
* auto :如果被修剪,出现滚动条。
* inherit:规定应该从父元素继承overflow属性的值。
(5) text-align 对齐方式
* left:左对齐;
* center:居中对齐;
* right:右对齐;
(6) line-height 行高(内联元素引用,竖直方向上留空白)
(7) text-decoration none(无任何线) underline(下划线) overline(文本上的一条线) line-through(删除线)
(8) border 边框 1px solid red;( 宽度样式颜色 顺序来写)
* width:宽度;
* style:样式;(solid,none,double,dotted,dashed,groove,ridge,inset,outset)
* color :颜色;
(9) outline 外轮廓 (不占元素空间)
* width:宽度;
* style:样式;
* color :颜色;
* style:样式;
* color :颜色;
(10) border-radius 边框倒角、边框半径,绘制圆角边框
*4个角可以单独定义,一起定义的话按顺时针顺序设置4个倒角(左上右上右下左下),取值为 绝对值或 百分比 值越大,边角越圆。(必须还得指定边框才看得到效果)
border-radius: 25% 20% 30% 10%;
(11) box-shadow 向方框添加一个或多个阴影 取值为多个属性值的列表( 不占空间)
#d1{
border:6px solid #888;
box-shadow:15px 10px #666 inset;
// 15为水平阴影位置,正为右,负为左;10为垂直阴影位置,正为下负为上;阴影颜色,无 为黑色;有为内部阴影,无为(outset)外部阴影;
}
(12)border-collapse:collapse; 合并边框
(13)padding 内容与边框之间的距离 可以为像素、百分比、但不能为负数。
* left
* right
* top
* bottom
padding:10px 20px 30px 40px; (上右下左顺序定义)
(14)margin 外边距 (语法与padding一致)
补充padding,margin知识(重点、难点)
css盒子模型:
1) box-sizing 盒子模型的计算方法
* context-box (默认值) 一个盒子的宽度等于margin+border+padding+width
* border-box (推荐使用) 一个盒子的宽度等于margin+width 便于排版计算可以省去很多麻烦
2)两个相邻元素若都指定了间距,那么间距会进行合并,合并后的值时二者指定的间距中的较大值(浮动会产生影响,间距不能合并)
3)区块元素若想在父元素中水平居中,margin:0 auto; 有浏览器自动计算左右间距--平均分
4)
marginx marginy paddingx paddingy BLOCK不浮动 占用空间 占空间、会合并 占用空间 占用空间 BLOCK浮动 占用空间、不合并 占空间、不合并 占空间 占空间 INLINE 占空间、不合并 无效 占空间 有效、不占空间(重叠) (15) background-color 设置元素背景色(内容+填充+边框 ,不会占据外边距)
(16)background-image 背景图片 url(xx.png)
(17)background-repeat
* no-repeat 不重复
* repeat-x 只水品平铺
* repeat-y 只垂直平铺
(18)background-position 控制图片位置
* left *center *right 还可以设置像素来控制(20px 30px)
(19)background-attachment 背景滚动方式
scroll:背景随内容滚动
fixed:背景固定不动
(20)background-image 凡是使用背景图片的地方都可以使用渐变作背景
linear-gradient 线性
redial-gradient 径向
repeating-radial-gradient 重复镜像
repeating-linear-gradient 重复线性
eg:#d1{
background-image:Linear_gradient(to bottom,red,#fff);
}
#d2{
background-image:Linear_gradient(90deg,red 0,#ccc 30%);
}
注:小生总结知识比较片面,比如想更详细的了解css属性还是以css官方为主,后续还会在对css定位、css3中的变形/转换,动画,媒体查询相关的知识在详细总结。