python全栈开发day37-css三种引入方式基础选择器高级选择器补充选择器

Posted 2020-11-19 富0代

一、昨日内容回顾

　　div：分割整个网站，很多块

　　　　（1）排版标签

　　　　（2）块级标签 独占一行 可以设置高和宽，如果不设置宽高，默认是父盒子的宽

        span：

　　　　（1） 小区域 （2）文本标签 （3）在一行内显示，不能放置容器类（块）的盒子

　　　　（4）宽高不能设置 （5）宽高跟span的内容相关

　　a：

　　　　（1）文本级标签 （2）不能设置高和宽 （3）超链接href：连接资源 title 鼠标的悬浮时的标题

 

　　　　　　跳转顶部top：

　　　　　　<div id= ‘top‘> <div>

　　　　　　　　.......

　　　　　　<a href=‘#top‘>跳转顶部 <a>

　　　　阻止a标签的默认事件

　　　　<a href = ‘javascript:;‘>跳转顶部<a>

               <a hred = ‘javascript:void(0);‘>跳转顶部<a>

　　p：

　　　　（1）段落标签 （2）独占一行（3）只能放置文字、图片、表单元素 ，不能放置容器（块）（4）有margin

　　img：

　　　　(1) 在一行内显示内容 （2）可以设置宽高

　　　　src：链接图片资源

　　　　alt：图片加载失败的时候显示的内容　　　

　　ul：ol、dl

　　　　子孩子永远是li

　　　　　li是块级标签，独占一行，能设置宽高，包含任意标签

　　form：

　　　　XMLHTTPRequest对象

　　　　：与服务器进行交互

　　　　type：text、submit、checkbox、ratio、button、

　　　　select(option),textarea,fieldset,

　　table:tr d　　　

二、今日内容总结

　　　1 css的介绍

　　　　html：结构标准

　　　　css：样式标准 cascading style sheet 层叠样式表

　　　　　　　作用：定义网页的效果

　　　　js：行为标准

　　　　

　　　2 css的三种引入方式

　　　　1）.行内样式

　　　　　　            <p style="color: red;">鞠疼</p>
              　　  坏处：不好维护

　　　　2）内接样式

　　　　style type="text/css">
                    div{
                        color: yellow;

                    }
                    p{
                        color: black;
                    }
                </style>

　　　　3）外接样式

　　　　　　链接式

　　　　　　　　<link rel=‘stylesheet‘ type="texl/css" href="./main.css">　　

　　　　　　导入式

　　　　　　　　<style type=‘text/css‘>

　　　　　　　　　　@import url(‘./main.css‘)

　　　　　　　　</style>

　　　3 css的基础选择器***

　　　　　　1) 标签选择器

　　　　　　　　    1.选中标签 2.不管标签藏的多深，都能选中 3.选择的是共性、而不是特性

　　　　　　2）id选择器

　　　　　　　　            <!-- 一个页面中只有唯一的一个id值 -->
           　　     <a href="#" title="" id="anchor">超链接</a>
                
             　　　　   #anchor{
                 　　　　　　   color: red;
             　　　　　　　　   }

　　　　　　3）类选择器

　　　　　　4） 通配符选择器

　　　4 css的高级选择器**

　　　　　　1） 后代选择器

　　　　　　　　div p{}

　　　　　　2）子代选择器

　　　　　　　　div>p{}

　　　　　　3）并集选择器

　　　　　　　　div,p,ul,ol{}

　　　　　　4）交集选择器

　　　　　　　　h3.active{}

　　　5 css的补充选择器

　　　　　1）属性选择器

　　　　　2） css3的选择器nth-child()

　　　　　3）伪类选择器

　　　　　　             爱恨准则
                 　　　　　　记住a:hover

　　　　　4） 伪元素选择器

                         p:after{

　　　　　　　　　　}