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

    1,:内联样式表 即写在标签内部
     
    solid表示实线,得到效果
     
    修改语句加宽高(注意分号隔开)
     
    得到效果
     
     
    当新设置行高(line-height:"")与外边框一样高的时候
     
     
    123出现垂直居中
     
     
    之后想让123再出现水平居中则添加text-align:center       (align 属性规定 div 元素中的内容的水平对齐方式)
     
    出现效果
     
     
    再让整个div居中,则设置边距margin:0px  再设置左右边距自动调整:auto
     

     
    2:内嵌样式表 (必须写在head标签里,因为程序先读取head标签)style标签
     
    注意,type标签可以不写,只写style
     
    比如只针对p标签起作用,就直接使用p写样式 ,比如设置背景颜色和文字大小,如下
     
     
    此时需要body中添加一个相对应的P标签,如下
     
     
    显示如下
     
     
    若在body中设置多个P标签,都执行内嵌样式
     
    显示如下     
     
     
    总结:
     
     

     
    3:外部样式表 
    注意写外部样式表的时候会首先默认写一个星号*
    margin间距设为0
    padding间距设为0     间距:P标签与P标签之间的距离
    比如此时*号标签等于对于所有标签去除边距和间距
     
     
     
    新建一个外部样式表,新建css
     
    新建如下
     
    然后把*标签与p标签剪切过来
     
    注意因为本身是css,所以不需要放置style标签,可直接写样式表
    所以保存后,出现效果如下
     
     
    在HTML当中引用css样式表,鼠标右键·····如下
     
    ·············································
     
     
    之后出现对应CSS的link语句
     
     
     此时保存刷新,则又出现之前出现过的样式,如图

    二 选择器
    1.标签选择器,就是上面说过的
     
    2.class选择器 
    class表示类,以点“.”开头,以class引用,可多次引用
     
     
    举例:
    比如在css中设置一个.aa标签
     
    接下来用class在HTML中的第二个p标签中引用.aa   。如下所示:
     
    显示效果:
     
    小结:.class选择器在css中以点开头设置标签,以class=“”在HTML的P标签中引用
     
    3.ID选择器       以#开头以ID引用,可以多次引用吗?不可以,注意ID是唯一引用
     
    例如在css中写入一个ID标签
     
    在html中引用,如下
     
    效果如下:
     
    不能两个p标签引用同一个ID标签,ID只能引用一次,class可以多个引用
     
    4.复合选择器
     
    例如P标签和span标签同时执行此样式:
     
     
    同时HTML中:0
    效果如图:0
     
     
    (2):
     
    其中.main表示在class=main所引用的标签内部(即两个尖括号中间的位置),如果有P标签存在,则这个P标签执行以下的样式。后代指被包围的。
     
    例如:
     
    同时css中如下
     
    显示效果
     
    其中黄色内容为p标签
     
    (3)筛选:
     
    此表示:p标签当中class等于sp的 执行以下此样式
     
    例如:
     
    同时HTML中
     
    显示如下
     
    注:可以理解为前面的P标签的规则没起作用···p标签只是起到了一个导向性的作用
     
     
     
     
     
    二.样式属性★★★★
    1.    样式属性之背景与前景

    1.背景:

     

    2.前景字体:

     

    (二)边界和边框

     

    border(表格边框、样式等)、margin(表外间距)。padding(内容与单元格间距)。

     

     

     

    例如:

     
     
    显示如图:
     
     

     

    (三)列表与方块

    widthheight、(topbottomleftright)只有在绝对坐标情况下才有用。

     

     



    效仿360浏览器中网站链接样式的写法

     

     

    链接的style

      a:link 超链接被点前状态

      a:visited 超链接点击后状态

      a:hover 悬停在超链接时

      a:active 点击超链接时

      在定义这些状态时,有一个顺序l v h a   一定要按照顺序来

    例如:

     

    显示如图

     

    此时访问过后默认浏览痕迹为紫色,如图

     

    然后在css中写入一个link标签,让此链接没有x下划线(text-decoration:none),如图

     

    再写visited

     

    再写hover(鼠标指在上方时,即鼠标悬浮在上方),此时出现下划线与文字颜色:

     

    再写active(行动),即点击时显现的颜色:

     

    之后保存刷新后出现360浏览器链接样式效果,不附图

    但是如下图中不同颜色的链接:

     

    则需要分类,写法如下

    l v h a 中分别加标签“.a1”,如下:

     

     

     

    再在HTML中   class="a1"  如下:

     

    再回到css中 复制一组lvha改标签为a2  , 并改变初始颜色   如下:

    4

     

    在HTML中再引用a2,如下

     

    效果如下

     

     

    注:其中hover还可以在其他div中使用

    例如:

     

     

     

    显示效果:鼠标指向时div区域变为绿色,鼠标离开变为蓝色。如下

     

    最后思维导图总结:

     

     

     

     

     
     
     
     
     
     
     
     
     
  • 相关阅读:
    Uboot命令使用
    git删除某次提交
    chrome随意改变主题
    C++11——处理日期和时间的chrono库
    C++11——多线程异步操作
    C++11——原子变量
    C++11——C++线程同步之条件变量
    C++11——C++线程同步之互斥锁
    C++11——call_once
    C++11——命名空间
  • 原文地址:https://www.cnblogs.com/Ivan99999/p/5856401.html
Copyright © 2011-2022 走看看