• 前端基础之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,不单单可以修改颜色的透明度,还可以修改字体的透明度

  • 相关阅读:
    实时27实战机器学习:图片验证码识别(Java实现)
    大屏26深度学习模型来从文档图片中自动化地提取出关键信息成为一项亟待解决的挑战
    f-string想必作为Python3.6版本开始引入的特性,通过它我们可以更加方便地向字符串中嵌入自定义内容
    大屏25JAVA+selenium+tess4j识别登陆验证码截图与识别
    前端12 highcharts和echarts选择
    大屏20基于 Selenium 的 Web 自动化测试框架完美版自动化解决方案 [开源项目]
    大屏24字典python+selenium的行为
    大屏23Tesseract字库训练Tesseract 3
    大屏21解决数据问题python-tesseract-ocr的安装及使用
    大屏22解决数据问题java浏览器源.docx
  • 原文地址:https://www.cnblogs.com/qijiaxun/p/14195418.html
Copyright © 2020-2023  润新知