day4 css样式表

css美化html网页

1内联样式表

  控制精确,可用性比较差。比如<p style="font-size:14px">内联样式表</p>

2内嵌式

  一个独立区域嵌在网页里,但是要写在head标签里。

3外部样式表

新建一个css样式表,用<link type="text/css" rel="stylesheet" href="css样式表"/>

注意不用style标签

4选择器(选择器用在head里面或者外联css样式表里面)

   1标签选择器

     div{样式}

    2class选择器

    用   .加class名开头

     

   3id选择器

      用   #加id名开头 

      

     4属性选择器

       命名一个属性           。            然后,                

   5复合选择器

     表示并列  空格表示后代

     

 6 样式表属性

6.1

    background-color: 背景色

    background-img:url(路径)  背景图片

   background-attachment:fixed;背景是固定的,不随字体滚动

    background-attachment:scroll; 背景不是固定的,随着字体移动

    background-repeat:no repeat;不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺。

    background-position:right top;背景图放在右上

    background-position:left 100px top 100px  ;背景图离左边和上边100px

 6.2字体

    font-family: 字体

    font-size:字体大小,可用像素,百分比等

    font-weight:bold,加粗  

    font-style:italic  倾斜     normal正常

   text-decoration:underline;下划线 。overline 上划线; line-through,删除线 none,去掉下划线。

   text-align:center 居中对齐   left是左 right是右  水平对齐

    vertical-align:middle 居中对齐 top是上 botton是下    垂直对齐

    text-indet:   首行缩进,后面跟像素

    line-height:24px  行高,

    display:none none为不显示,inline-block,显示为块,不自动换行;block显示为块,但是自动换行。inline的宽高不能设置

    visibility:hidden 可视性 hidden为隐藏 visible为显示。

6.3边界和边框

    border(表格边框)

    border:1px solid blue   1像素蓝色实线边框,也可写为 border-width:1px;border-style:solid;border-color:blue。(四边框,可设置单独某一边的border-top:)

    margin(外边框边距)

    margn:1px  四边的边框是1像素,auto是居中  可在margin后面添加四个像素(margin:1px 1px 1px1px),表示四边框顺序为 上-右-下-左

    padding (内容与边框的间距)用法和margin相似

   

原文地址:https://www.cnblogs.com/cyd123/p/6538241.html