python-day52--前端html、css

一、html需掌握的:

1. img标签

  属性:src  alt  title  width  height

2. a标签

  属性:href  target

3. ul 标签及li 标签,二者都是块级标签

  ul 属性(type:disc  circle  square  none)

4. table 标签及 tr 标签 和 td 标签和 th 标签

  属性:border    cellpadding    cellspacing    width    rowspan    colspan

5. form 表单  input 标签 :type类型

6. select 标签 option 标签

  属性:multiple  及 selected

7. lable 标签 

  属性:for

二、css需要掌握的第一部分:查找标签

1.css三种导入方式:

  1.行内式:常用在网站页面最下端,网站的介绍中

    缺点:html与css代码杂糅在一起,耦合性太强

  2.嵌入式:<style></style>

  3.链接式:<link rel="stylesheet" href=""/>

2.css选择器:

一 基本选择器

       1 标签选择器
        div{
            color: red;
        }
        2 id选择器
        #p2{
            color: red;
        }
       3 class选择器

        .c1{
            color: red;
        }
       4 通配选择器(了解)

        * {
            color: red;
        }

        二 组合选择器

        1 后代选择器

        .c2 p{
            color: red;
        }

         2 子代选择器

        .c2>p{
            color: red;
        }

        3 毗邻选择器 (了解)

        .c2+p{
            color: red;
        }

        4 兄弟选择器 (了解)

        .c2~p{
            color: red;
        }

        5.多元素选择器

        .c2 .c3,.c2~.c3{
            color: red;
            background-color: green;
            font-size: 15px;
        }

        6.   p.c1{
            color: red;
        }       表示的是选择一个既是p标签并且是c1类标签的

        7.   class=‘s1 c1‘    标签可以有多个类名

        8.属性选择器: (可以自定义属性)
                1.    [egon] {
                            color: red;
                           }        

                2.    [egon=‘dog‘] {
                            color: red;
                           }     

                3.    p[egon] {
                            color: red;
                           }
                    选择的是p标签中属性是egon的  如:<p egon="dog">asd</p>

3.伪类:     伪类都是通过: 实现的                伪类的目的:解耦

  anchor伪类:   一般和a标签连用

    属性:

      :link {color: red;}     没有接触过的 链接是 红色

      :hover {color: gray;}  鼠标悬浮在链接上 是 灰色

      :active {color: green;}  访问时 是 绿色

      :visited {color: gold;}  访问完  是 黄色 

         .outer:hover .inner1{color: gold;}
            表示的是 悬浮在outer位置时  outer的后代inner1区域变化颜色
            这种情况,只能是后代,其他情况不行
before after 伪类

例:p:before{content:"hello";color:red;}

4.选择器优先级:

三、css需要掌握的第二部分:属性操作

1.文本:

  1.颜色:十六进制/red/RGB

  2.位置:  水平:text-align:left / right / center / justify

        垂直:line-height=行高

  3.间距:line-height:10px;       

  4.文本与图片对齐:vertical-align:middle / top / ±数字(+下移,-上移)          注意:动的是图片

  5.对 a 标签操作时 一定要定位到 a 标签:text-decoration:none;  去掉a 标签的下划线

  6.font-size:10px;  字体大小

  7.font-weight:light / bold / broder  调字体粗细

  8.font-style:oblique/italic   斜体

  9.text-indext:30px;   首行缩进    10.letter-spacing:10px;  字母间距

  11.word-spacing:20px;  单词间距

2.内外边距 padding 与margin

padding    内边距    加上padding后盒子区域会变大

padding 简写:
    padding:50px     上下左右都是50
              :50px 20px    上下50
              :50px 20px 10px   上 50   左右 20  下 10
              :50px 20px 10px 10px     上 50    右  20  下 10   左 10 

margin:盒子与盒子的距离(外边距)

                {width:80%;
                    margin: 0 auto;
                           }
               0 表示上下距离,auto 是左右居中                    

3.边框属性border

border        加上border后盒子区域会变大
      属性:
        1.border-width    

        2.border-style    

        3.border-color

        4.简写:  border:3px solid red;

4.背景属性

1. background-color: red;

2.background-image: url("");

3.background-repeat: no-repeat / repeat-x / repeat-y;   图片重复    

4.background-position: center;
   (与background-position:center center一样)

    background-position: 400px 200px;  背景图片距离左边界400px,上边界200px

5.简写:background:url("") no-repeat center;    图片居中不重复

6.窗口小图片大时,移动图片,在浏览器中调尺寸

5.display 属性

dispaly:inline-block     变成内联块级标签---可以解决块级在一行显示问题

dispaly:none      隐藏盒子
    三个盒子,如果中间的盒子设置了dispaly:none ,并且它是三无属性(无边框、无padding、无文本),那么下方盒子就会顶上来
    

6.overflow 属性

overflow:hidden / auto / scroll

overflow:hidden  解决溢出问题

7.position 定位

1. position:static  默认位置

2. position:fixed   固定位置

    例子:     position:fixed;
                  top / left / bottom / right :20px     (相对可视窗口的距离)

3. position:relative;   相对自己的位置,并且原位置保存

    例子:     position:relative;
                  top:20px;
                  left:200px;   

4. position:absolute;        相对已定位的父级,并且原位置不保存

   例子:     position:absolute;
                  top:200px;
                  left:200px;
                           

8.float 浮动属性:  解决多个块级标签在一行显示

1.浮动布局的位置:看上一个元素是不是浮动元素,如果是就挨着放,如果不是就另起一行放

2.清除浮动:  1  clear:left;  清除自身左侧不能有浮动元素  2  clear:right; 清除自身右侧不能有浮动元素  3  clear:both;  清除自身左右两侧不能有浮动元素(按照先后顺序判断)  4  父级塌陷问题
时间: 2024-10-11 05:14:38

python-day52--前端html、css的相关文章

python之 前端HTML/CSS基础知识学习笔记

1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head> <title>...</title>

python和前端之HTML的激情

python写前端需要啥语言? a:HTML → 骨架[类似于创建一个塑料模特],搭建.调整整个页面布局 b:CSS    → 衣服[类似于给塑料模特穿上衣服,不能那么暴露],将整个页面美化 c:JS    → 马达[给模特装一个小马达,这样才能动,才能叫嘛],让页面动起来 1.初识HTML. 基本概念: html为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式.比如字体.颜色.大小等. 超文本:音频,视频,图片称为超文本. 标记 :<英文单词或者字母>

前端开发css实战:使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简单),使用css的优势显而易见,它可以使页面中的javascript变得更少. 实现逻辑: 核心:hover伪类控制子元素的显示隐藏,添加css3动画;  (没错就是这样简单) :hover伪类,适用于当用户指向一个元素时,例如用户的鼠标指向一个段落p.当用户鼠标离开元素时,恢复元素原有的样式显示

好程序员web前端分享CSS文件引用的最优方法

好程序员web前端分享CSS文件引用的最优方法,在html总引入css文件的方法: 1链接式: 2导入式: 区别: 使用链接式时,会在加载页面主体部分之前加载css文件,这样现实出来的页面一开始就是带有样式效果的,而使用导入式时,会在整个页面装载完成之后再装载css文件,对于有的浏览器来说,在一些情况下,如果页面文件的体积比较大,则会出现先现实无样式的页面,闪烁一下之后再出现设置样式的效果.从浏览者的感受来说,这是使用导入式的一个缺陷.** 链接式比导入式快. 当有多个文件链接到页面的时候会导致

好程序员web前端分享css常用属性缩写

好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 pr

python为前端提供API

作为一名前端来学习后端语言,有难度啊.这里把第一次尝试的过程做个记录 1.网上看到Python给前端提供API可以使用python的flaskweb框架 #py文件 import json from flask import Flask app = Flask(__name__) @app.route("/") def index(): result = { 'status': "200", 'data': 'Hello, world!', } return jso

前端04 /css简绍/css选择器

目录 前端04 /css简绍/css选择器 昨日内容回顾 1.css 1.1 css简绍 1.2 css语法 1.3 css的几种引入方式 2.选择器 2.1基本选择器 2.2组合选择器 3.css权重 a标签设置样式,需要选中设置,不能继承父级标签的样式 前端04 /css简绍/css选择器 昨日内容回顾 html标签 块级标签:独占一行,可以包含内联标签和部分块级标签 内联标签:不独占一行,只能包含内联标签,不能包含块级标签 常用标签 div标签和span标签 a标签:超链接标签 <a hr

前端04 /css样式

目录 前端04 /css样式 昨日内容回顾 css样式 1高度宽度 2字体属性 3文字属性 4背景属性 5边框属性 6display属性 7.盒子模型 8.float浮动 前端04 /css样式 昨日内容回顾 css引入 内联: <div style='color:red;'></div> 内部: head标签中的style标签中写 外部文件引入 <link rel='stylesheet' href='css文件路径'> 选择器 基础选择器 元素选择器 类选择器 id

前端体系 - CSS

1.盒子模型 标准:border+margin+padding+content IE : margin+ content(border+padding+content) 2.box-sizing属性? 用来控制元素盒子模型的解析模式: box-sizing: W3C的标准盒子模型来解析. border-box: IE传统的盒子模型.设置了元素的高宽之后,就包含了border+padding+height/width 3.选择器 123456789 id选择器(#myid)类选择器(.myclas

前端之css样式(选择器)。。。

前端之css样式(选择器)... 一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style