参考博客：https://www.cnblogs.com/majj/p/9021419.html

1.CSS的三种链接样式:

　　行内链接(优先级最高)

　　内接样式

　　外接样式

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 权重： 优先级高 权重大  谁在页面谁的权重大 -->

    <!-- 外接样式 -->

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

    <style type="text/css">

        /*内接样式*/

        /*选择器*/

        span{

            color: green;

            font-size: 30px;

        }

    </style>

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

</head>

<body>

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

    <p style="color: red; font-size: 30px;">wusir</p>

    <span style="color: purple;">alex</span>

</body>

</html>

三种链接样式

2.CSS的选择器

　　选中的是"共性"

（1）CSS 层叠样式表

        作用：修饰网页结构

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

        <p style="color: red; font-size: 30px;">wusir</p>

        <span style="color: purple;">alex</span>

（2）css的三种引入方式

        - 行内样式

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

        - 内接样式

        - 外接样式

（3）基本选择器

     id选择器

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

     标签选择器

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

     类选择器

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

     通配符选择器

            通常是对页面进行重置样式表
<!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.类（class）选择器  .类名  选中的也是共性 可以有多个

        小技巧：

            不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式

            每个类要尽可能的小，有共同的概念，能够让更多的标签使用

        .active{

            color: yellow;

        }

        .large{

            font-size: 30px;

        }

    3.id选择器  选中的是‘特性’  id是唯一的

        p1{

            color: green;

        }

    4. 通配符选择器   * （在以后工作中不要用这个  

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

        {

            padding: 0;

            margin: 0;

        }

        a{

            text-decoration: none;

        } 清除a标签的下划线

        .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">alex</p>

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

    <p>alex3</p>

    <p>alex4</p>

    <p>alex5</p>

    <ul>

        <li class="active large">  #类名可是多个，方便以后选择时，可以类的不同而精确选择自己想要的数据

            alex1

        </li>

        <li>

            alex2

        </li>

    </ul>

    <ul>

        <li class="active">

            wusir

        </li>

    </ul>

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

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

    <input type="text">

</body>

</html>

day 37 CSS的更多相关文章

  1. Grunt的配置及使用（压缩合并js/css）

    Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...

  2. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  3. web前端-html学习笔记

    学习html最重要的是坚持.细心.多动手.慕课网<HTML+CSS基础课程>的笔记. 1.<h1>网站标题</h1> 如:<h1>腾讯网</h1& ...

  4. mahout安装和测试

    Mahout 是 Apache Software Foundation(ASF) 旗下的一个开源项目,提供一些可扩展的机器学习领域经典算法的实现,旨在帮助开发者更加方便快捷地创建智能应用程序.Apac ...

  5. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  6. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  7. 【干货分享】前端面试知识点锦集02（CSS篇）——附答案

    二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding ...

  8. IE7,6与Fireofx的CSS兼容性处理方法集结

    CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码 ...

  9. 很强大的HTML+CSS+JS面试题（附带答案）

    一.单项选择(165题) 1.HTML是什么意思? A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 2.浏览器针对于HTML文档起到了什么作用? A)浏览器用于创建HTML ...

随机推荐

  1. OptimalSolution(5)--数组和矩阵问题（2）2

    一.找到无序数组中最小的k个数 二.在数组中找到出现次数大于N/K的数 三.最长的可整合子数组的长度 四.不重复打印排序数组中相加和为给定值的所有二元组和三元组 五.未排序正数数组中累加和为给定值的最 ...

  2. Linux之Centos7开机之后连不上网

    问题:ns33mtu 1500 qdisc noop state DOWN group default qlen 1000 解决方法: root@topcheer ~]# systemctl stop ...

  3. Linux常见命令之文件处理命令

    ls命令 ls(选项)(参数) 选项 -a:显示所有档案及目录(ls内定将档案名或目录名称为“.”的视为影藏,不会列出): -A:显示除影藏文件“.”和“..”以外的所有文件列表: -C:多列显示输出 ...

  4. Android 设备唯一标识（多种实现方案）

    前言 项目开发中,多少会遇到这种需求:获得设备唯一标识DeviceId,用于: 1.标识一个唯一的设备,做数据精准下发或者数据统计分析: 2.账号与设备绑定: 3..... 分析 这类文章,网上有许多 ...

  5. 在线API文档管理工具Simple doc

    Simple doc是一个简易的文档发布管理工具,为什么要写Simple doc呢?主要原因还是github的wiki并不好用:没有目录结构,文章没有Hx标签索引,最悲剧的是文章编辑的时候不能直接图片 ...

  6. jdk基础配置

    今遇到一事,tomcat启动是报错,将jdk位数错误,有问题,32位和64位的问题 cmd java -verison 显示的确实是jdk 64位,又跑到 环境变量看了下java_home的配置 这里 ...

  7. Python安装cx_Oracle与操作数据测试小结

    这里简单总结一下Python操作Oracle数据库这方面的相关知识.只是简单的整理一下之前的实验和笔记.这里的测试服务器为CentOS Linux release 7.5. 个人实验.测试.采集数据的 ...

  8. 《Effective Java》 读书笔记（七）消除过期的对象引用

    大概看了一遍这个小节,其实这种感觉体验最多的应该是C/C++程序,有多杀少个new就得有多个delete. 一直以为Java就不会存在这个问题,看来是我太年轻. 感觉<Effective Jav ...

  9. MIT线性代数：18.行列式及其特性

  10. python items和setdefault函数

    items() dict = {'runoob': '菜鸟教程', 'google': 'Google 搜索'} print("Value : %s" % dict.setdefa ...