参考博客：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. SpirngCloud之Ribbon负载均衡(二)

    一 概念 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端 负载均衡的工具. 简单的说,Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负 ...

  2. 构建企业级数据湖？Azure Data Lake Storage Gen2实战体验（下）

    相较传统的重量级OLAP数据仓库,“数据湖”以其数据体量大.综合成本低.支持非结构化数据.查询灵活多变等特点,受到越来越多企业的青睐,逐渐成为了现代数据平台的核心和架构范式. 作为微软Azure上最新 ...

  3. python基础-字典dict

    字典-dict 用途: 定义方法:通过{} 来存储数据,通过key:value (键值对)来存储数据,每个键值对通过逗号分隔.在键值对中,key 是不可变的数据类型,value 是任意数据类型 def ...

  4. pymssql默认关闭自动模式开启事务行为浅析

    使用Python采集SQL Server数据库服务器磁盘信息时,遇到了一个错误"CONFIG statement cannot be used inside a user transacti ...

  5. P3665 [USACO17OPEN]Switch Grass

    题目描述 N个点M条边的无向图,每个点有一个初始颜色,每次改变一个点的颜色,求改变后整张图上颜色不同的点之间的距离最小值. 思路 考虑整张图的距离最小值一定是一条边,而不可能是一条路径,那么显然这条边 ...

  6. git上传项目到github远程库

    最近在学习使用 git 上传管理项目,依照教程,建好了一个远程库,也实现了本地库与远程库的项目同步上传,但是在试着将本地库里的项目上传到另一个新建远程库时遇到了问题,一直上传不成功,经过一番查找摸索终 ...

  7. 计划任务at和crontab

    目标:会看,会写计划任务时间,会制定计划任务 一次性:at yum -y install at #安装at systemctl start atd #启动at服务 systemctl enable a ...

  8. macOS 使用Miniconda配置本地数据运算环境

    目前,做数据分析工作,基本人手Numpy,pandas,scikit-learn.而这些计算程序包都是基于python平台的,所以搞数据的都得先装个python环境...(当然,你用R或Julia请忽 ...

  9. .NET Core前后端分离快速开发框架(Core.3.0+AntdVue)

    .NET Core前后端分离快速开发框架(Core.3.0+AntdVue) 目录 引言 简介 环境搭建 开发环境要求 基础数据库构建 数据库设计规范 运行 使用教程 全局配置 快速开发 管理员登录 ...

  10. 深入理解计算机系统 第三章 程序的机器级表示 part2

    这周由于时间和精力有限,只读一小节:3.4.4  压入和弹出栈数据 栈是一种特殊的数据结构,遵循“后进先出”的原则,可以用数组实现,总是从数组的一端插入和删除元素,这一端被称为栈顶. 栈有两个常用指令 ...