博客园

8、css其他相关

1、分组和嵌套

多个选择器可以并列公用一套css样式
div,p,span {}
不同选择器之间也可以混合使用
.c1,#d1>span{}

2、伪类选择器

a:link{}  访问前
a"hover{}  点到上面 浮动
a:active{}  点住不松
a:visited{} 访问后
input:focud{} input框获取焦点

3、伪元素选择器

    p:first-letter{}  通过css加文本内容 但是无法选中
    p:before{}
    p:after{}
   ps:before和after多用于清楚浮动带来的负面影响

4、选择器优先级

    选择器相同 就近原则
    选择器不同
        行内>id>class>标签
        精确度越高说话越硬
    ps:!important强制让标签采用样式  不推荐使用

5、宽高

  width
  heigh
  块儿级标签不修改的情况下默认占浏览器的一整行,块儿级标签的高度也是取决与标签的内部文本的高度
    内部文本的高度  但是可以通过css设置
  行内标签宽度和高度都是有内部文本决定的 行内标签是无法设置长宽的 无效

6、字体属性

字体样式  草书、行书、华文行楷
font-family
字体大小
font-size
字重
font-weight
文本颜色
    1、直接写颜色
    2、写颜色的编号 #4e4e4e
    3、写颜色的三基色 rgb(128,128,128)
    4、可以给颜色加透明度 rgba(128,128,128,0.5)  范围0-1
    ps;可以用pycharm 微信 qq 等软件快速取色

7、文字属性

文字对齐
    text-align
        center 剧中
文字装饰
text-decoretion:none  主要是用来给a标签去掉自带的下划线
首行缩进
text-index

8、背景属性

背景色
backgroud-color
背景图片
background:# fff url() no-repeat center center....

ps:当多个属性前缀名都是相同的情况下 一般都支持简写 只写前缀

ps:在调样式的时候 可以借助浏览器快速的微调,然后将调整好的参数修改到css
背景图片应用实际案例

9、边框属性

任何一个标签都有上下左右四个方向的边框
border-width、border-style、border-color
简写 border
画圆 border-radius:50%

10、长宽属性

能够让标签具有自身没有属性的特征
display
    none 隐藏 并且原来的位置也没了
    inline
    block
    inline-block

ps:visibility:hidden 只隐藏 位置还占用

11、css模型

    1、外边距-标签和标签之间的距离 margin
    2、边框       border、
    3、内边距、内填充   padding
    4、内容

    body标签默自带8px的margin
    margin:padding也一样
        10 上下左右
        10 20 上下 左右
        10 20 30 上 左右 下
        10 20 30 40 上 右 下 左

12、浮动float

    只要是前期页面布局 一般都是用浮动来设计页面
    能够让标签脱离正常的文档流漂浮到空中(距离用户更近)
    浮动的元素没有块儿级和行内之说 标签多达浮动起来就
posted @ 2021-03-08 20:28  小刘学python  阅读(68)  评论(0编辑  收藏  举报