一,css的三种添加方式:
1, 行内样式是在标记的style属性中设定CSS样式
如: <p style="color: red">Hello world.</p>
2, 内部样式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对
如:<head>
<style> 这个位置就能放一些含类标签的属性
</style>
</head>
3,外部样式:就是将css写在一个单独的文件中, 然后在页面进行引入即可
如: <link href="mystyle.css" rel="stylesheet" type="text/css"/> 标黄的是文件名
二,选择器:
(1) 基本选择器
元素选择器:将标签直接放到style中,
如: p {color: ‘red’}
ID选择器: 将标签属性中的ID值加到#号后放到 style中
如;#s1 { color: ‘red’}
类选择器:将标签属性中类的词放到style中,一般是要加点
如: .c1 {font-size: 14px;}
通用选择器:改变所有标签属性
如: * {color:white;}
(2) 组合选择器
后代选择器: A标签下的所有B标签,都遵循这个样式, 注意中间用空格分隔
如: div a {color:red}
儿子选择器: A标签下的第一层B标签,都遵循这个样式,注意中间用>号分隔
如: div>a {color:red}
相邻选择器:A标签同级相邻向下的单个B标签,遵循这样式,注意中间用+号分隔
如: div+a {color:red}
弟弟选择器:A标签同级向下的所有B标签,都遵循这个样式,注意中间用~号分隔
如:div~a {color:red}
(3) 属性选择器
标签指定属性: 查找含某个属性的A标签,遵循这个样式,注意:属性用[ ]号括起来
如:div[text] {color:red}
标签指定属性和值:查找含属性和值的A标签,遵循样式,注意:属性和值用[ ]括起来
如:div[text=’’s1’’] {color:red}
(4) 分组和嵌套: 元素样式相同,多个选择器之间可以用逗号隔开,添加相同样式
如:div,p {color:red}
嵌套: 多种选择器混合使用,设置一种样式
如: .c1 p {color:red}
(5) 伪类选择器: 注意 :多用于给a标签设置伪类属性
未访问的链接: a:link {color:green} 设置未访问过的链接颜色
已访问的连接: a:visited {color:red} 设置已访问过的链接颜色
常用鼠标移动到链接: a:hover {color:pink} 鼠标放到链接上时的颜色
选定的链接 : a:active {color:red} 鼠标点击这个链接时的(动作)颜色
input输入框获取焦点时的样式: 鼠标点击输入框时的框的设置
如:input:focus { outline:none; background:#eee}
(6) 伪元素选择器
p:first-letter { font-size:48px; color:red} 为首字母设置特殊的样式
p:before {concent:’*’; color:red} 在每个p元素之前插入内容
p:after {content:’??’; color:red} 在每个p元素之后插入内容
before和after多用于清除浮动
(7) 选择器的优先级
css有继承机制,它允许样式不仅可以应用于某个特定的元素,还以可应用于它的
后代.列如一个body定义了字体颜色,页面上的所有标签都会继承body的字体
颜色.继承的权重为0,只要给对应的标签设置字体颜色就可以覆盖它的继承.
>选择器相同时:就近原则,以最后一次的为准
>选择器不同时:
内联(1000)>ID选择器(100)>类选择器(10)>元素选择器(1)>继承的(0)
>可用 !import方式强制让样式生效,不推荐使用, 不易维护
三,css属性相关
(1) 宽和高 ; 块级标签的能设置宽度(width)高度(height)
内联标签的宽度由内容决定,高度初始值是0,
(2) 字体属性
>文字字体: boby {font-family:’microsoft yahei’, ’微软雅黑’, ‘arial’等等}
font-family可以把多个字体名作为一个’回退’系统来保存,如浏览器不支持第一
个字体,则会尝试下一个,浏览器会使用它可识别的第一个值.
>字体大小: font-size: 14px 如设成inherit表示继承父元素的字体大小
>字重(粗细) font-weight用来设置字体的粗细,参数如下:
normal默认值,标准粗细 bold粗体 bolder更粗 lighter更细
inherit继承父元素字体 100~900设具体粗细,400(默认).700(粗体)
>字体颜色 color用来设置文字的颜色,由以下几种设置方法:
直接用英文字母单词表示颜色
十六进制:6位或简写的3位表示不同颜色
rgb(255,0,0):括号内每个位取值范围0-255,3位分别代表红绿蓝
rgba(255,0,0,0.3):前三位和RGB意思一样;第四个为alpha,指定了色彩的透明度,
取值范围为0-1之间小数
(3) 文本属性
>文字对齐: 上下居中line-height:行高值px 一个技巧,让文字行高等于所在标签
行高(父标签),该文字就自动居中了
text-align 属性规定元素中的文本水平对齐方式,参数如下:
left左对齐,默认值 right右对齐 center居中 justify两端对齐
>文字装饰
text-decoration属性用来给文字添加特殊效果,参数如下:
none定义标准文本 underline文本加下划线 overline文本上加一条线
line-through穿过文本的一条线 inherit继承父标签的文字装饰
a { text-decoration: none; } 常用来去掉a标签默认的自划线.
>首行缩进
p { text-indent: 32px; } 将段落的第一行缩进32像素,此处这个数字通常设定为
font-size字体像素的2倍.
(4) 背景属性
>背景颜色设置: background-color: red;
>背景图片设置: background-image: url(‘1.jpg’)
>背景重复:background-repeat:属相 ( 具体属相参数如下)
repeat(默认):背景图片平铺满整个网页
repeat-x: 背景图片只在水平方向上平铺
repeat-y: 背景图片只在垂直方向上平铺
no-repeat: 背景图片不平铺
>设置背景位置: (两种方法,具体如下)
background-position:left top background-position:100px 150px
背景位置后参数可用方位和具体像素来指定.
总结:背景属性可分开依次设置,也可简写设置,方法如下:
1.background: url("hlw.png") no-repeat right bottom
2.background: url("hlw.png") no-repeat 101px 201px
代码理解依次为 背景: 图片网址链接 背景重复 左右中 上下中
背景重复后参数为指定图片显示的位置, 可用(left左) (right右) (center中)(top上) (bottom下)来指定,也可根据标签设置的宽度和高度来自定义显示位置.图片要存放必然要先设置个存放的标签,设置标签时就可设置标签的宽度和高度. 这是一种简写方式,可分开来写,每个背景属性:值
(5) 边框属性
border-width(边框宽度) border-style(边框风格/样式) border-color(边框颜色)
border-radius(边框半径,值设为50%可得到一个圆)
>边框宽度:是指边框线的宽度,单位是px(像素)
>边框风格/样式: none(无边框) dotted(点状虚线边框) solid(实线边框)
dashed(矩形虚线边框)
>边框颜色: 单指边框线的颜色
>以上都是指统一设置边框的属相,也可单独设置某一边的边框属相,如下:
border-top-style(上边框的样式) border-top-color(上边框颜色)
border-right-style(右边框样式) border-bottom-color(下边框颜色)
定义格式为:border-上下左右-边框属相
总结:边框样式可一项项的罗列设置,也可简写来设置,如下:
border: 2px solid red ( 边框粗2像素, 实线, 红色 )
(6) display(显示)属性
display : none 使浏览器中不显示这个标签.
display : block 让内联标签占满一行空间,也能设置宽和高,内容之外的部分会自动用margin填充.
display : inline 可把块级标签的显示效果变为内联便签的显示效果,只独占文
本内容大小的空间,此时设置的宽,高,margin(边缘)填充等都失效
display : inline-block 让标签同时具有块级和内联的特点.好处是能让标签既能
设置宽度和高度,又能在一行显示.比如想让多个标签显示在
同一行,又能给他们设置宽度和高度
补充:display:none可以隐藏某个标签,且隐藏后的标签不会再占用任何空间,相当于是彻底消失了一样.
visibility:hidden也可用来隐藏某个标签,但其隐藏的只是表象,虽不显示,单依旧会占用页面布局的空间.
(7) css盒子模型
盒子模型的两个属性: magin 和 padding;分别指文本内容和边框/边框和其上内
容之间的填充距离.
magin/padding都可分别设置上下左右的填充距离,top/bottom/left/right
用法:magin-top: 10px padding-left: 6px 等等. 推荐使用简写,用法如下:
magin:10px; 代表上下左右填充都是10像素
magin:10px 20px; 代表上下填充10像素,左右填充20像素
magin:1px 2px 3px; 代表上填充1, 左右填充2, 下填充3
magin: 6px 7px 8px 9px; 分别代表上右下左依次为6789(顺时针方向)
margin:10px auto; 让这个方块上下填充10像素,左右在标签内居中显示.
padding属性的使用方法同上,一模一样,参考上面即可.
补充:所有的浏览器都有个默认的整体页面边框外边距,可在style标签对内第一行
做个初始化即可.用法: * { margin: 0 }
(8) 浮动属性
>浮动元素会生成一个块级框,而不论它本身是何种元素;
>浮动的框可以向左或向右移动,直到其外边缘碰到包含框或另一个浮动的边框为止
>用法* float:值; 值有三个,分别为left(向左浮动) right(向右浮动) none(不浮动)
浮动的缺点,当便签浮动起后,它就不占用页面空间了,其后的便签都会自动补位该空
间,就造成部分内容的覆盖,如何解决?(拿左浮举例)引用clear属性,原理:在浮动标签同
级放个块级标签,只规定其左侧不能有浮动标签存在即可, 正常情况下,不规定高度的
又无内容的块级标签是不会显示的,但不显示不代表其不存在,只不过该标签是个默
认宽度占一行,高度为0的一个标签.
>clear:值 clear属性规定的是标签的哪一侧不许有其它浮动标签存在,参数如下:
left(左侧不许) right(右侧不许) both(左右都不许) none(默认值,两边都允许)
inherit(继承父标签的clear属性)
>解决浮动缺点方法二: 通过伪元素(伪标签)来实现
通过伪元素在某个标签的内部内容之前后之后添加个空,再规定该空元素左侧不得
有浮动(clear:left),最后用display来让其显示成块级标签的样式即可(通过伪元素添加
的内容都是内联标签,就是只占与内容相当的空间大小,用display可让其独占一行)
技巧:约定俗成的样式类:
.clearfix:after {content:’’’’; clear:both; dispiay:block}
(9) 溢出属性
用法: overflow:值 有以下值:
visible 默认值,内容不会被修剪,呈现在元素框之外
hidden 内容被修剪,溢出内容不可见
scroll 内容被修剪,会显示滚动条以便查看溢出内容
auto 如果内容被修剪,则显示滚动条以便查看溢出内容
inhtrit 从父标签处继承overflow属性值
直接用overflow:值是设置的水平和垂直双向,单向也可设置,值类型都一样,如下:
overflow-x设置水平方向 overflow-y设置垂直方向
溢出应用举例:在框中放入一张任意大小的图片,让其依照图框显示,溢出部分截掉.
思路:首先在div标签中加入img标签来获取图片,让后设置div标签使其显示处想要
的框,然后设置img标签的宽度为100%(此处的100表示父标签div的宽度),最后设置
div标签的溢出属性为hidden即可.
(10) 定位属性
static 默认值,无定位.不能作为绝对定位的参照物,且设置标签的left/top等方位间距
不起作用.
relative相对定位,以自身所在位置为参考,依照设定的left,right,top,bottom偏移量进
行偏移,注意,相对定位时即使标签已偏移走,单其还占据着原来的位置.
相对定位的主要用法:方便绝对定位元素找到参照物.
absolute绝对定位,设置为绝对定位的标签会在设定的偏移量处生成个块级框,其之
前占据的位置会清掉,偏移前无论是内联还是块级偏移后都会生成块级框.
绝对定位依照的是其最近的父级标签来定位,如果没有则以body进行定位.
重点:如果父级设置的是相对定位,子标签为绝对定位,那么子标签就会以父级
的左上角为原始点进行定位.任何时候子标签的绝对定位都是依照父标签偏
移后的左上角原始点来定位,这就很好的解决了自适应网站的标签偏移问题
fixed固定定位, 固定定位参考的是整个窗口,使用top,right,bottom,left等为期指定距
离窗口距离来实现固定住.即使窗口出现滚动条,固定定位的标签也不会随着
滚动. 了解点:一个标签若设置过绝对定位或固定定位,那么就不能在设置其浮
动,因为这是两个不同的流,一个是浮动流,一个是定位流;但是设置相对定位的
却可设置浮动,因为相对定位会依然占据其原始空间.
补充:设置绝对定位或固定定位的标签,就会从文档空间中消失,就和浮动一样,其不
再占用页面布局空间.