码迷,mamicode.com
首页 > Web开发 > 详细

css

时间:2018-09-02 20:21:53      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:radius   存在   虚线   ora   alpha   weight   生成   分组   范围   

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

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

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

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

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

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

再占用页面布局空间.

css

标签:radius   存在   虚线   ora   alpha   weight   生成   分组   范围   

原文地址:https://www.cnblogs.com/laogao123/p/9574747.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!