css

一,css的三种添加方式:

1, 行内样式是在标记的style属性中设定CSS样式

 如: <p style="color: red">Hello world.</p>

2, 内部样式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对

如:<head>

</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等为期指定距

离窗口距离来实现固定住.即使窗口出现滚动条,固定定位的标签也不会随着

滚动. 了解点:一个标签若设置过绝对定位或固定定位,那么就不能在设置其浮

动,因为这是两个不同的流,一个是浮动流,一个是定位流;但是设置相对定位的

却可设置浮动,因为相对定位会依然占据其原始空间.

补充:设置绝对定位或固定定位的标签,就会从文档空间中消失,就和浮动一样,其不

再占用页面布局空间.