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

CSS

时间:2018-09-18 13:48:07      阅读:509      评论:0      收藏:0      [点我收藏+]

标签:颜色   浏览器   :link   href   允许   css选择器   nbsp   head   集中   

CSS(Sascading Style Sheet )  /*层叠样式表*/

引入方式

  内部样式:将样式集中写在head标签中的style样式中

  外部样式:写在单独的css样式中   <link href = "文件" >

CSS选择器

  基本选择器:

    元素选择器:p  {color:"read"}

    ID选择器:#d1   ...

    类选择器:.c1 ...           p.c1  ...  

  通用选择器:* { ... }

  组合选择器:

    后代选择器: li  a { ... }

    儿子选择器:div> p { ... }

    毗邻选择器:div+p { ... }

    弟弟选择器: #d1~p { ... }

  属性选择器:

    p[title]  p [title= "123"]

  伪类选择器:

    a:link  {color :"read "}   /*未访问的链接*/

    a:visited { ... }   /*已访问的链接*/

    a:horver { ... }  /*鼠标移动到链接上*/

    a:active  { ... }  /*选定的链接*/

    input:focus { ... } /*输入框获取焦点时的样式*/

  伪元素选择器

    p: first-letter  /*给首字母v设置特殊样式*/

    p:before {content= ""]   /*在每个p元素之前插入内容*/

    p:after { ...}

选择器的优先级:

  内联样式的权重为1000

  ID选择器的权重为100

  类选择器的权重为10

  元素选择器的权重为1

  权重计算永不进位

文字属性:

  文字对齐:text-align 

  文字装饰:text-decoration 

       none   默认

       underline 文本下划线

       overline  文本上划线

       line-through  穿过文本的一条线

       inherit  继承

  常用:a {txet-decoration:none;}  /*去掉a标签默认的下划线*/

  首行缩进:p {text-indet: 32px}   /*将段落的第一行缩进32px*/

背景属性:

  background- color :red  /*背景颜色*/

  background-image:    ...

  background-color:  ....

  repeat(默认) /*背景图片将铺满整个网页*/

边框:

  border- width:

  border- style :

  border- color :

  简写:border: 1px solid  black

border-radius :

  指将各边成圆弧  100% 50%皆是圆形  25%和其他是指圆角

margin(外边距)、padding(内填充)

  简写顺序:上左下右(顺时针)

    提供一个:将用于一边

    提供两个:第一个用于上-下  第二个用于左右

    提供三个:第一个用于上,第二个用于左-右, 第三个用于 下

float:

  left   right  none(默认)

clear:

  ...规定元素那一侧不允许其他浮动元素

  ***clear属性只会对自身起作用,不会影响其他元素

  

overflow

  hidden(可用于制作头像)

  scroll (内容会被修剪,但是浏览器会显示滚动条以便查看其他内容)

 

CSS

标签:颜色   浏览器   :link   href   允许   css选择器   nbsp   head   集中   

原文地址:https://www.cnblogs.com/crzhang/p/9653339.html

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