zoukankan      html  css  js  c++  java
  • 前端基础之CSS(第二天)

    css:层叠样式表

    注释:/**/
    语法结构:选择器 {属性:值;属性:值……}
    三种引入方式:style,link,行内式

    学习流程:1.学会如何查找标签 2.学会如何添加样式

    如何查找标签

    基本选择器

    id选择器:# id值{}
    类选择器:. class值{}
    元素/标签选择器:标签 {}
    通用选择器:* {}

    组合选择器

    后代选择器:div span{} 选择div内部所有的span
    儿子选择器:div>span{} 选择div儿子级别的span
    毗邻选择器:div+span{} 选择div同级别下一个span
    弟弟选择器:div~span{} 选择div同级别下面所有的span

    属性选择器

    含有某个属性:[username] 选择含有username属性的标签
    含有某个属性等于某个值:[username="egon"] 选择含有username="egon"属性的标签
    某个标签,含有某个属性等于某个值:input[username="egon"] 选择含有username="egon"属性的标签,并且为inpu的标签

    分组与嵌套

    div,p,span{} 选择所有的div,p,span标签
    #d1,.c1,span{} 并列选择

    伪类选择器

    a:link{} visited,active,hover
    input:focus{}

    伪元素选择器

    p::first-letter{} 选择p标签的第一个字母
    p::before{} 在标签的开头添加样式,但是不可选中
    p::after{} 在标签的最后添加样式,但是不可选中

    选择器优先级

    选择器相同 谁近就听谁的
    选择器不同 id>类>标签>行内式

    样式属性

    长宽

    height,width
    行内标签无法设置长宽,即使写了也没有效果

    设置字体属性

    font-familiy
    font-size
    font-weight
    color:rgba(255,255,255,0.4)

    设置文字属性

    text-align:center 居中
    text-decoration:none 可以用来给a标签去掉下划线
    text-indent:32px 文字缩进32px

    设置边框属性

    border-width
    border-style
    border-color
    border:5px solid green
    height:200px;200px;border-radius:50% 圆

    display

    display:none 隐藏标签,不展示到页面并且原来的位置不再占有了,但是还存在于文档上
    display:inline 让块级标签变成行内标签的特点
    display:block 让行内标签设置成块级标签的忒但
    display:inline-block 让标签既可以在一行显示,又可以设置长宽
    visibility:hidden 单纯的隐藏,位置还在

    盒子模型

    margin:外边距
    padding:内边距
    border:边框
    content:内容
    margin:0 auto; 让标签水平居中,竖直方向不可以

    浮动

    标签的排版布局:浮动的标签脱离正常的页面,浮动在空中
    浮动的元素没有块级一说,本身多大浮动起来之后就只能占多大
    .clearfix::after{content:'';display:block;clear:both} 清除浮动的类

    overflow

    visible:默认就是可见,溢出还是能看到
    hidden: 溢出部分直接隐藏
    scroll: 加一个上下滚动条
    100% 让宽度占父元素的100%

    position

    静态:所有的标签默认都是静态的,无法改变位置 static
    相对定位:相对于标签原来的位置做移动

    position:relative;left:50px;top:50px;
    绝对定位:相对于已经定位过的父标签做移动
    position:absolute;left:50px;top:50px;
    固定定位:相对于浏览器窗口固定在某个位置
    position:fixed;

    z-index,opacity

    z-index,该值越大,离用户越近
    opacity,不单单可以修改颜色的透明度,还可以修改字体的透明度

  • 相关阅读:
    [置顶] cAdvisor、InfluxDB、Grafana搭建Docker1.12性能监控平台
    15 个 Docker 技巧和提示
    Docker资源管理探秘:Docker背后的内核Cgroups机制
    SVN通过域名连不上服务器地址(svn: E175002: OPTIONS request failed on '/svn/yx-SVN-Server' Connection refused: connect)
    图片点击放大功能
    jquery-选择checkbox的多种策略
    HTML-input标签需设置的属性
    MyBatis-配置缓存
    SpringMVC redirect乱码问题
    Mysql-左连接查询条件失效的解决办法
  • 原文地址:https://www.cnblogs.com/qijiaxun/p/14195418.html
Copyright © 2011-2022 走看看