参考博客：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. NetworkManager网络通讯_networkReader/Writer（六）

    unet客户端和服务端进行消息发送时可以采用上一节中方法,也可以直接用networkReader/Writer类进行发送 (一)服务端/客户端注册消息 ; m_Server.RegisterHandl ...

  2. 痞子衡嵌入式：飞思卡尔i.MX RTyyyy系列MCU硬件那些事（2.2）- 在串行NOR Flash XIP调试原理

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RTyyyy系列EVK在串行NOR Flash调试的原理. 本文是i.MXRT硬件那些事系列第二篇的续集,在第二篇首集 ...

  3. leetcode系列---Two Sum C#code

    /// <summary> /// 方法一:双循环 /// </summary> /// <param name="array"></pa ...

  4. Okhttp 请求流程梳理

    最近在看 Okhttp 的源码.不得不说源码设计的很巧妙,从中能学到很多.其实网上关于 Okhttp 的文章已经很多了,自己也看了很多.但是俗话说得好,好记性不如烂笔头,当你动手的时候,你会发现你在看 ...

  5. API 接口开发规范

    整体规范建议采用RESTful 方式来实施. 协议 API与用户的通信协议,总是使用HTTPs协议,确保交互数据的传输安全. 域名 应该尽量将API部署在专用域名之下.https://api.exam ...

  6. spring cloud 2.x版本 Zuul路由网关教程

    前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 本文基于前两篇文章eureka-server.eureka-client.eureka ...

  7. python 爬取网页简单数据---以及详细解释用法

    一.准备工作(找到所需网站,获取请求头,并用到请求头) 找到所需爬取的网站(这里举拉勾网的一些静态数据的获取)----------- https://www.lagou.com/zhaopin/Pyt ...

  8. js+jquery 笔记

    本人也不知道该怎么写javascript笔记,本人就拿一个例子来写,这个例子就从算法所说起吧! 例如: 一个整数的数组 [122,393,664,935,1386,1675,1928,2199,247 ...

  9. 创建windows系统下的虚拟机

    创建新的虚拟机  添加映像(windows系统下必须先添加映像) 选择相应的镜像文件:网上查找密钥输入:版本按要求选择:单击 下一步:设置虚拟机名称  位置 :下一步 默认的磁盘大小(不用管)——下一 ...

  10. canvas绘制工作流之绘制节点

    上一篇我们介绍了canvas绘制工作流的大概步骤,接下来会有系列文章细致的介绍怎么用canvas绘制工作流:这篇文章主要介绍用canvas绘制流程节点. 绘制前我们需要先准备一张节点图片,例如::好了 ...