zoukankan      html  css  js  c++  java
  • !!!CSS 样式表

    样式表:

    作用:美化网页,页面布局。

    分类;

    内联,写在标签里面style=""里面的样式,优点是控制精确,可重用性差。
    内嵌,嵌在网页的head里面,可重用性高
    外部,样式写在另一个文件里面,如果要用直接附加过来。

    优先级:内联>内嵌>外部

    选择器:

    * 代表所有的元素
    一般的网页都需要在写这个样式,去掉有些标签自带的边界,auto代表居中
    *{
    margin: 0px auto;
    padding:0px;
    }

    标签选择器:用标签的名字来选择元素。
    如:div{

    }

    ID选择器:用标签的ID名来选择元素,ID的名字前面加#
    如:#d1{

    }

    CLASS选择器:用class名来选择元素,class名前面加.
    如:.a{

    }

    组合选择器:

    并列关系:用逗号隔开,代表并列。
    后代关系:用空格隔开,空格前面的是后面的父级元素。
    筛选关系:用点隔开。

    样式:

    1.前景与背景

    前景:指文本
    font:是否倾斜 是否加粗 字体大小 选择字体;

    font-family:修改字体
    font-size:字体大小
    font-style:字体样式,italic倾斜
    font-weight:字体粗细,bold加粗

    color:字体颜色
    text-decoration:文本修饰,none可以去下划线
    text-indent:首行缩进

    背景:
    background-color:背景色
    background-image:背景图片
    background-repeat:平铺方式
    background-position:背景图片的位置
    background-attachment:背景图片的固定方式

    对齐方式
    text-align:水平对齐方式 center居中
    vertical-align:垂直对齐方式 middle居中 top靠上 bottom靠下
    line-height:行高

    2.边框和边界

    边框:
    border: 宽度 样式 颜色;
    border-1px;
    border-style:solid;
    border-color:#F00;

    边界:
    外边距:
    margin:上 右 下 左;
    margin-top:上边距
    margin-right:右边距
    margin-bottom:下边距
    margin-left:左边距

    内边距:
    padding:上 右 下 左;
    padding-top:内上边距
    padding-right:内右边距
    padding-bottom:内下边距
    padding-left:内左边距

    3.列表与方块
    宽度
    height:高度

    list-style:位置 type 图片;
    list-style-type:列表标示的样式,none去掉
    list-style-image:列表图片
    list-style-position:列表样式的位置


    4.格式布局

    position: 位置,absolute绝对位置,相对于浏览器边界的位置;relative相对位置,相对于它本应该出现的位置。fixed:固定位置,它不会随着滚动。

    设置好position之后,就可以用top right bottom left这四个样式。

    float:流,流式布局。

    两个方式:left向左流 right向右流

    流后面如果要加东西的话要截断流:clear:both

    z-index:值越大的越靠上层

    5.其它

    display: none 隐藏 block显示

    visibility:hidden隐藏 visible显示

    display和visibility的区别:display隐藏相当于这个元素没有了,visibility的隐藏该元素所占的位置还在,只是内容隐藏了。

    overflow:超出范围。。。 hidden 超出隐藏 scroll 超出出现滚动条

    cursor:pointer; 鼠标放上显示(小手)

    hover:不是一个样式,用元素的ID或者CLASS之类后面跟冒号hover,代表鼠标放到此元素上显示哪些样式

    作业:

    1.搜索:样式表做圆角矩形;浏览器的兼容性处理。
    网页模板,网页特效。

    2.布局页面:http://www.harvard.edu/
    http://www.wharton.upenn.edu/

  • 相关阅读:
    2020.04.11补提
    UCF Local Programming Contest 2017(2020-04-06)
    AtCoder Beginner Contest 161
    UCF Local Programming Contest 2016(2020-03-28)
    Benelux Algorithm Programming Contest 2019(2020.03.21)
    Preliminaries for Benelux Algorithm Programming Contest 2019(2020.03.14)
    AtCoder Beginner Contest 158
    A-Leftbest
    强迫症
    不大想更了……
  • 原文地址:https://www.cnblogs.com/ROCKyou/p/4959370.html
Copyright © 2011-2022 走看看