CSS的三种引入方式,以及基本选择器

一.关于上篇博客的回顾

1.标签
    - 行内标签 a span i em strong b、label
        （1）在一行内显示
        （2）不能设置宽高，默认的宽和高是内容的宽高
         行内块标签： input img  
         （1） 在一行内显示
         （2） 可以设置宽高
    - 块级标签 h1（页面中只有一个h1,为了这个搜索引擎）~h6  div ul li ol dl dt dd form table 
         （1）独占一行
         （2）可以设置宽高，如果不设置宽，默认是父盒子的100%宽
         
    
         
2.一些网页布局结构
3.div模型
    division:分割
    
div+span 网页布局
a：
    （1）超链接
     href 超链接的地址
     target: _self 默认 在当前中打开链接地址
             _blank  在空白的页面打开连接地址
             
p标签只能放 文本 图片 表单元素，不能放其他的元素
        

5.标签的使用
(1).a：
    （1）超链接
           href 超链接的地址
           target: _self 默认 在当前中打开链接地址
                   _blank  在空白的页面打开连接地址
     2）标签内部跳转
           锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。
                 
(2).img
     src:连接的图片资源
     alt:图片资源加载失败。显示的文本
            
     ul: unordered list 无序列表 ul下的子元素只能是li
         li
         type='circle' 圆心
         type='square' 方块
     ol:
        ordered list
        只能是li
     dl：定义列表
        dt:定义标题
        dd:定义描述
            
　　　sublime的简单使用
     ctrl+shift+p  搜package control
        
     table  border='1' style="border-collapse:collapse;"
         tr  表格行
         td  表格描述
     form
        HTTP协议
        action:提交的服务器网址
        method:get(默认)| post(应用：登录注册、上传文件)
        页面中的a img link 默认是get请求

        input
           type:
                text: 文本输入框
                password:密码输入框
                file:文件按钮 提交文件的时候一定要用post 一定要给form标签添加 Enctype='multipart/form-data'
                submit:提交按钮
                button:普通按钮
            name:提交到服务器端的key
            value: 显示的文本内容，与服务器端的value
            placeholder：文本代替           
        label
            for:是与下面的某个表单控件的id属性进行关联           
(3) BS交互
      1.form表单默认与服务器进行交互
      2.ajax技术

 二.CSS

1.CSS层叠样式表

作用:修饰网页结构

2.CSS的三种引入方式

(1).行内样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
    </head>
    <body>
        <p style="color: red; font-size:40px ;">娃哈哈</p>
        <span>爽歪歪</span>
    </body>
</html>
行内样式

注意:行内样式的优先级是最高的

(2).内接样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style type="text/css">
            span{
                color: red;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <!--<p style="color: red; font-size:40px ;">娃哈哈</p>-->
        <span>爽歪歪</span>
    </body>
</html>
内接样式

(3).外接样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <link rel="stylesheet" href="./index.css" />
    </head>
    <body>
        <!--<p style="color: red; font-size:40px ;">娃哈哈</p>-->
        <span>爽歪歪</span>
    </body>
</html>
外接样式

三.基本选择器

1.id选择器

选中的特性是唯一的,不能重复

2.标签选择器

选中的页面中共性的标签

3.类选择器

选中的也是页面中共性的标签,类名可以有多个

4.通配符选择器

通常是对页面进行重置样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/reset.css">
    <style type="text/css">
        
        /*1.标签选择器 选中的是 ‘共性’*/
        p{
            color: red;
        }
        /*重置样式*/
        /*组合选择器*/
        ul,ol{
            list-style: none;
        }


        /*2.类选择器  .类名  选中的也是共性 可以有多个*/
        .active{
            color: yellow;
        }
        .large{
            font-size: 30px;
        }

        /*3.id选择器  选中的是‘特性’ # id是唯一的*/
        #p1{
            color: green;
        }
        /*4. 通配符选择器   * 在以后工作中不要用这个  */

        /*一开始布局页面如果写css,一定要重置*/

        /**{    
            padding: 0;
            margin: 0;

        }*/
        a{
                /*清除a标签的下划线*/
            text-decoration: none;
        }
        .baidu{
            color: blue;
            /*下划线*/
            text-decoration: underline;
            /*显示小手的状态*/
            cursor: pointer;
        }
        input{
            border: none;
            width: 400px;
            height: 40px;
            border: 1px solid #e0e0e0;
            font-size: 22px;
        }

    </style>
</head>
<body>
    <p id="p1">营养快线</p>
    <p id="p2">营养快线1</p>
    <p>营养快线2</p>
    <p>营养快线3</p>
    <p>营养快线4</p>
    <ul>
        <li class="active large">
            乳娃娃
        </li>
        <li>
            爽歪歪
        </li>
    </ul>
    <ul>
        <li class="active">
            娃哈哈
        </li>
    </ul>
    <a href="javascript:void(0);">百度一下</a>
    <span class="baidu">百度一下</span>
    <input type="text">
</body>
</html>
汇总展示
posted @ 2018-09-19 19:42  骑驴老神仙  阅读(720)  评论(0)    收藏  举报