zoukankan      html  css  js  c++  java
  • css学习笔记

    1.css意味层叠样式表。

    2.css常用的方式有①内部样式表、②外部样式表、③ 内联样式表、④外部导入样式。(不推荐直接在行内标签属性值处添加style更改样式(内联样式),除非代码量很小。)

    3.css的语法规范:

    选择器{

      属性名1:属性值1;

      属性名2:属性值2;

    }

    4.常用选择器的使用

      1)id在css中的表示方式为#,id的属性值不能相同。

      2)class在css中的表示方式为 . 。

      3)标签选择器:直接写标签名。即选中范围内的所有同类型的标签。

      4)子代选择器:比如  .num>ul>li,选择器为>.。

      5)后来选择器:“空格”,直接空格。

      6)群组选择器:同等级多选择用,逗号隔开。

      7)通用选择器:*又叫通配符,选择所有的标签,权重最低。

    5.常用选择器中的权重优先级

      1)id>class>*,!important:出现!important的修饰优先级最高。

      2)展示的最后样式以权重最高的为主。

    6.常用的颜色表示方法:

      1)英文单词表示法,比如:white、black。

      2)十六进制表示法:以#开头的十六进制表示颜色,比如#15aafb,表示为淡蓝色。有缩写形式,比如#fff为白色,#eee为灰色。

      3)rgb表示法:用rgb模式表示颜色,拓展样式rbga表示法,例如rgba(11,11,11,0.5),a表示透明度。

    7.伪类:

      1):hover,鼠标悬浮上去的表示效果。

      2):activ,鼠标点击激活对象的时候的显示效果。

      3):focus,鼠标选中对象的时候的显示效果。

    8.css中其他一些常用属性及用途

      1)line-height:行高。设置文本垂直居中时候常用,将行高设置为盒子的高度相等的时候,内容垂直居中。

      2)margin:auto:设置自动左右居中。

      3)text-decretion:去除文本样式,常用在a标签,将a标签中的文本下划线去掉。

      4)list-style:none;:将li标签中的样式去掉(开头的小圆圈)。

      5)font-family:设置文字类型inherit为斜体,font-size大小,font-weight加粗。

      6)input中 outline:none;:为去掉input的边框。

      7)background-positon:定位背景图片。xy轴的调整,可以写在一行,也可以单独调整xy。

      8)background-repeat:设置背景图片是否平铺重复,常用为no-reapeat不重复。

      9)opacity:元素透明度的设置,在0-1之间。

      10)z-index:-1,调整图层的顺序。

    9.盒子模型的理解:

          margin:为外边距,padding为内边距,border为边框,和里面的内容一起组成了盒子模型。任何一个元素都是盒子模型,

          盒子模型的大小不仅仅是内容大小,也要包括内边距、外边距、边框、和内容。一般调整的样式为 例如:margin:10px 10px 10px 10px;

        顺序为上右下左顺时针顺序,也可以单独调整。

    10.定位:position:属性值{

          top:10px;

          left:10px

    }

      1)相对定位,属性值为relative,以盒子当前位置为坐标开始调整。

      2)绝对定位:absolute,以网页为坐标调整位置。

      3)固定定位:fix,固定在网页的特定位置,常用语小广告,悬浮窗口等等。
      4)定位也会使元素脱离文档流。

    11.浮动:脱离文档流。

      1)float:right右浮动,元素从右向左依次排列,反向浮动。

      2)float:left左浮动,从左向右依次排列正向浮动。

    12.框架(不常用):

    <frameset rows="30%,70%" />

      <body><frameset>只能有一个。

    13.css中的边框设置:

      1)boder :1px  solid black;意为一像素大小的黑色实现边框。

      2)边框的圆角:border-radius:3px  意为3像素大小的圆角。

    14.阴影:

      倒影:box-shadow:x y  厚度   颜色 ;

    15.在计算机中坐标与我们数学中常用坐标不相同,y轴的正方向在下面。

    16.clear:both清除浮动带来的影响。

    17.关于浮动:元素一旦浮动以后就会变成行内块元素,除了清楚浮动可以清楚浮动带来的影响,第二种方法是设置盒子在父元素的高度。

    18.使元素消失的两个办法:

      1)display:none 下方元素自动补上。

      2)visibility,保留位置不会自动补上。

    19.鼠标形状的改变:       cursor:pointer  鼠标指针放上去的时候变成手的形状,常用在可以点击的a标签或者按钮。

    20.改变元素的性质:

      将元素设置成块级元素:   display:block

      将元素设置为行内块级元素:  dispaly:line-block

      将元素设置为行内元素的:   display : line

      块级元素可以设置宽高,行内元素不用单独占一行,详情分类见HTML的笔记,视情况转换元素的类型。

    21.解决文字溢出的问题(文字输入的限制):overflow

      (设置宽高的情况下 文字太长溢出)

      属性值

      1)hidden  溢出部分被裁剪,并且不可见。

      2)auto  被裁剪,出现滚动条。

      3)scroll 也出现滚动条,在不溢出的情况下也会有滚动条。

      4)inherit  内容不会被裁剪。

       5) ellipis  多余的文字会被省略号代替。

  • 相关阅读:
    x+=y与x=x+y有什么区别?
    Linux下带宽流量工具iftop实践
    使用pinyin4j实现汉字转拼音
    Spring整合Velocity模版引擎
    Json工具类库之Gson实战笔记
    腾讯移动分析 签名代码示例
    Docker搭建Portainer可视化界面
    maven 打包 spring boot 生成docker 镜像
    Mysql 为什么要选择 B+Tree
    idea 添加 注释 配置
  • 原文地址:https://www.cnblogs.com/wangzheng98/p/10827914.html
Copyright © 2011-2022 走看看