参考博客：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. django-URL应用命名空间（十）

    在多个app下有相同函数时,可能会出现混乱,这时要给每个app取名 基本目录: settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'djan ...

  2. R语言之脸谱图

    脸谱图和星图类似,但它却比星图可以表示更多的数据维度.用脸谱来分析多维度数据,即将P个维度的数据用人脸部位的形状或大小来表征.脸谱图在平面上能够形象的表示多维度数据并给人以直观的印象,可帮助使用者形象 ...

  3. Linux sh脚本用spool导出oracle数据库指定表表数据

    脚本如下,已验证可用,可配合crontab使用. 1 #!/bin/bash cd /opt/oracle/datafor_kf #redirect environment variables sou ...

  4. 前后端对称加密（AES）

    后端实现(JAVA) package com.vcgeek.hephaestus.demo; import org.apache.commons.codec.binary.Base64; import ...

  5. 【Linux】【自学笔记】Linux下面docker安装mysql

    写在前面: 捣腾继续,之前把一个SpringBoot的程序安装在docker上面,参考链接:https://www.cnblogs.com/aki-stones/p/2019-11-01-note.h ...

  6. AQS 入门

    一 AQS简介 路径:java.util.concurrent.locks.AbstractOwnableSynchronizer. 定义:AQS提供了一种 通过维护一个volatile修饰 int类 ...

  7. SpringCloud 中集成Sentinel+Feign实现服务熔断降级

    Sentine 1.背景 Sentinel 是阿里中间件团队开源的,面向分布式服务架构的轻量级高可用流量控制组件,主要以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度来帮助用户保护服务的稳 ...

  8. 零基础Linux入门之《Linux就该这么学》

    本书是由全国多名红帽架构师(RHCA)基于最新Linux系统共同编写的高质量Linux技术自学教程,极其适合用于Linux技术入门教程或讲课辅助教材,目前是国内最值得去读的Linux教材,也是最有价值 ...

  9. linux 自启动 | 三种方式自启动

    linux 实现自启动有多种方式,通过Linux 底层启动原理介绍,便可以理解以下几种方式 这里简单介绍一下这几种方式 一.自定义开机程序   /etc/rc.d/rc.local  1.vim  / ...

  10. mount 和 /etc/fstab关系。

    mount  -a 自动按照格式执行/etc/fstab里面的文件. /etc/fstab 文件格式: device        mount-point      type      options ...