参考博客：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. 两种unity双击事件

    有时候需要用到双击事件,而unity未提供双击控件,在此提供两种双击事件方法,进攻参考: 1)此方法为通过unityevent来实现 首先新建image(或其他不带点击事件的控件),添加如下脚本,然后 ...

  2. 启动elasticsearch报错的几种原因及解决方法

    ERROR: [1] bootstrap checks failed [1]: max virtual memory areas vm.max_map_count [65530] is too low ...

  3. 用c语言实现前序创建二叉树（递归），分别用前序，中序，后序遍历，以及分别输出节点个数和叶子节点个数

    本人c语言小白一枚,近期在学习数据结构(c语言版),特写此随笔,做一些总结和分享,如有不当之处,请各位技术大牛斧正 首先我们用一个结构体来抽象树的结点,代码如下(这里我们存放的数据为char型,大家可 ...

  4. java常用类Time

    LocalDate:IOS格式(yyyy-MM-dd)日期 LocalTime:表示一个时间 LocalDateTime:表示时间日期 Instant 时间线上的瞬时点,可以用来记录应用程序中的时间时 ...

  5. 学习笔记45_log4net日志

    1.配置添加一个App.config *对于网站,就使用web.config ***对于App.config和web.config的配置,在表现形式上是不一致的,使用的时候应该在网上查对于的配置设置. ...

  6. NOIP模拟 22

    剧情回放:xuefeng:考场上你们只打暴力不打正解,我不满意! skyh:考场怒切T2以表明自己拥护xuefeng的决心 BoboTeacher:这场考试就没想让你们上100 神犇skyh:(笑而不 ...

  7. HashMap 中的容量与扩容实现，细致入微，值的一品！

    前言 开心一刻 巴闭,你的脚怎么会有味道,我要闻闻看是不是好吃的,嗯~~爸比你的脚臭死啦!! …… 高手过招,招招致命 JDK1.8 中 HashMap 的底层实现,我相信大家都能说上来个 一二,底层 ...

  8. P2860（）

    题目描述: 为了从F(1≤F≤5000)个草场中的一个走到另一个,贝茜和她的同伴们有时不得不路过一些她们讨厌的可怕的树．奶牛们已经厌倦了被迫走某一条路,所以她们想建一些新路,使每一对草场之间都会至少有 ...

  9. CHRONY 时间服务器

    时间同步服务chrony ntp network time Protocol之前使用的同步协议 chrony ntp协议的实现,兼容网络中的ntp服务(centos7之后就不再使用ntp,转而使用ch ...

  10. 数据可视化：绘图库-Matplotlib

    为什么要绘图? 一个图表数据的直观分析,下面先看一组北京和上海上午十一点到十二点的气温变化数据: 数据: 这里我用一段代码生成北京和上海的一个小时内每分钟的温度如下: import random co ...