<!--

    （1）CSS 层叠样式表

            作用：修饰网页结构

    （2）css的三种引入方式

            权重： 优先级高 权重大  谁在页面谁的权重大

            - 行内样式

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

            - 内接样式

            - 外接样式

    （3）基本选择器

         id选择器 #

                选中的是特性 唯一的，不能重复  （与js有关系）

         标签选择器

                选中的是页面中共性的标签

         类选择器  .

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

         通配符选择器

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

    border: 1px solid #e0e0e0                   设置input的边框颜色和宽度

    <a href="javascript:void(0);">百度一下</a>  去除a 标签的下划线

    text-decoration: underline;                 普通文字加下划线

    cursor: pointer;                            显示小手的状态

-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css三种引入方式 和四种基本选择器</title>

    <!-- 外接样式 -->

    <link rel="stylesheet" href="./index.css">

    <!--内接样式-->

    <style type="text/css">

        /*内接样式*/

        /*1 选择器  选中的是 ‘共性’ */

        span{

            color: green;

            font-size: 30px;

        }

        /*组合选择器*/

        ul,ol{

            list-style: none;

        }

        /*2 类选择器  .类名  选中的也是共性 可以有多个*/

        .active{

            color:blue

            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>

    <!--引入js文件-->

    <!--js文件中的内容 ：  alert(22222)    网页提示;-->

    <script type="text/javascript" src="./javascript/index.js"></script>

</head>

<body>

    <!-- 行内样式 的优先级是最高最高的 -->

    <p style="color: red; font-size: 30px;">行内样式</p>

    <span style="color: purple;">行内样式2</span>

    <p id="p1">p1的id</p>

    <p id="p2">p2的id</p>

    <ul>

        <li class="active">

            王先生

        </li>

    </ul>

    <!--a 标签的下划线被去掉了  javascript:void(0); 点击不变化正常是锚点点击刷新-->

    <a href="javascript:void(0);">百度一下</a>

    <span class="baidu">百度一下</span>

    <input type="text">

</body>

</html>

css-1,css的三种引入方式 基本选择器的更多相关文章

  1. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  2. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  3. CSS【03】：CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  4. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  5. 006 CSS三种引入方式

    CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

  6. Python 45 css三种引入方式以及优先级

    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...

  7. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

  8. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

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

    一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...

随机推荐

  1. git chekout分支遇到问题：need merge

    解决步骤: 在master上, 1.git add . 2.git commit 3.新建分支,并且checkout到此分支,重新提交

  2. C++引用具体解释

    引用是C++中新出现的.有别于C语言的语法元素之中的一个. 关于引用的说明,网络上也有不少.可是总感觉云遮雾绕,让人印象不深刻. 今天我就来深入解释一下引用.并就一些常见的观点进行说明,最后附带代码演 ...

  3. 编程之美 set 11 买书问题

    题目 书店搞促销, 同时购买多卷书时, 有机会享受优惠 2本优惠 5%, 3本 10%, 4 本 20% 5 本 25% 设计算法, 求解购买一本书的最低价格 分析 1. 第一个感觉是一次购买的越多省 ...

  4. 开发环境eclipse for Mac 下的常用快捷键汇总(基本参照Win系，将Ctrl换为Command)

    最近迁移开发环境到Mac下,在豆瓣看到一个常用快捷键,去掉废话直接上干货 Command + O:显示大纲 Command + 1:快速修复 Command + D:删除当前行 Command + O ...

  5. __init__()

    __init__() 是类的内置方法,用于初始化类的内部状态,当我们去实例化一个对象的时候,默认就会执行 __init__() 下面的语句,例子如下: #!/usr/bin/env python #- ...

  6. 本地存储数据库indexedDB实现离线预览的功能

    今天在学习<高级JS编程>,看到离线存储,cookie和session都十分的熟悉,但是书中还提到了indexedDB和webSQL(已废弃),indexedDB可以像mysql一样建表, ...

  7. Json数组基础知识

    1.对象是一个无序的“‘名称/值’对”集合. (1)一个对象以“{”(左括号)开始,“}”(右括号)结束. (2)每个“名称”后跟一个“:”(冒号): (3)“‘名称/值’ 对”之间使用“,”(逗号) ...

  8. 【BZOJ2973】石头游戏 矩阵乘法

    [BZOJ2973]石头游戏 Description 石头游戏的规则是这样的. 石头游戏在一个n行m列的方格阵上进行.每个格子对应了一个编号在0~9之间的操作序列. 操作序列是一个长度不超过6且循环执 ...

  9. Caused by: java.lang.ClassNotFoundException[android的终极解决错误]

    from:http://blog.csdn.net/changemyself/article/details/7861525 08-13 18:29:22.924: E/AndroidRuntime( ...

  10. 初级Java面试题 - JavaSE篇

    p{font-size:18px;} li{font-size:18px;} 加入我的QQ群(701974765) 获取更多好用又好玩的软件,还有不定期发放的福利呦(-￣▽￣)- Java基本数据类型 ...