CSS(上)

什么是CSS？

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

CSS的优点

  1. 使数据和显示分开
  2. 降低网络流量
  3. 使整个网站视觉效果一致
  4. 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

CSS的引入方式

行内样式

<p style="color: red">您好</p>

内部样式

<style>

        div{

            color:red;

        }

    </style>

    <!--我们的<style>标签要写在<body>的外面-->

<div>我就是这么强大</div>

eg:这是个在pycharm中的例子。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css的引入方式</title>

    <style>

        div{

            color:red;

        }

    </style>

    <!--我们的<style>标签要写在<body>的外面-->

</head>

<body>

<div>我就是这么强大</div>

</body>

</html>

外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式

<link rel="stylesheet" href="01.css">

eg:

01.css

div {

    color: aqua;

}

css的引入方式.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css的引入方式</title>

</head>

<body>

<link rel="stylesheet" href="01.css">

<div>我就是这么强大</div>

</body>

</html

CSS的两大特性

继承性

给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

层叠性

权重大的标签覆盖掉了权重小的标签，谁的权重大，浏览器就会显示谁的属性

CSS选择器

基本选择器

元素选择器

你要给那个标签上面加上样式，你就在 <style>中写哪个标签就好了，不过只要在这也页面一样的标签都会被改掉，适用于批量的，统一的样式。

   <style>

        div{

            color: blue;

        }

    </style>

<div>基本选择器</div>

ID选择器

适用于特定标签设置特定样式

    <style>

        #d2{

            color: red;

        }

        /* # 代表的就是一个标签的ID*/

    </style>

<div id="d2">ID选择器</div>

类选择器

标签中的class属性如果有多个，要用空格分隔,适用于给某些标签设置样式

 <style>

        /*这个 . 就代表类*/

        .c2{

            color: red;

        }

        .c3{

            color: blue;

        }

        .c4{

            color: yellow;

        }

     /*我们可以对不同的类的属性的标签设置不同的颜色*/

 </style>

 <div class="c2">ID选择器2</div>

 <div class="c3">ID选择器3</div>

 <div class="c4">ID选择器4</div>

组合选择器

组合选择器

多个选择器之间使用 逗号 隔开。表示选中的页面中的多个标签。一些共性的元素

<style>

    .d2,p{

        /* class="d2"的div标签和p标签都会变为红色*/

        color: red;

    }

</style>

<div class="d2">哈哈哈</div>

<p>p标签</p>

<div class="c">9098</div>

后代选择器

使用 空格 表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

<style>

    div div{

        color: red;

    }

    /*div标签里面的所有div后代都会变为红色*/

</style>

<div>我是你爸爸我真伟大

    <div>我是儿子1</div>

    <div>我是儿子2

        <div>我是孙子</div>

    </div>

</div>

儿子选择器

使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代元素p。

<style>

    /*选择所有父级是 <div> 元素的 <p> 元素*/

    div>p{

        color: red;

    }

</style>

<div>我是你爸爸我真伟大

    <div>我是儿子

        <p>我是孙子</p>

    </div>

</div>

毗邻选择器

多个选择器之间使用 + 隔开。

<style>

    /*选择所有紧接着<div>元素之后的<p>元素*/

    div+p{

        color: blueviolet;

    }

</style>

<p>我是个p</p>

<div>我是你爸爸我真伟大</div>

<p>我也是个p</p>

兄弟选择器

多个选择器之间使用 ~ 隔开。

<style>

    /*span后面所有的兄弟class="a"的标签*/

    /*我也是个p这个标签不是span的兄弟，他就不会显示*/

    span~.a{

        color: blueviolet;

    }

</style>

<div>

    <span>哈哈哈</span>

    <h1 class="a">标题1</h1>

    <h2 class="a">标题2</h2>

    <p>我是个p</p>

    <h4 class="a">标题4</h4>

</div>

<p class="a">我也是个p</p>

更多选择器

属性选择器

用标签[属性]表示用于选取带有指定属性的元素。

<style>

    /*选取带有name属性的元素。*/

    div[name]{

        color: pink;

    }

</style>

<div name="123">我的名字是123</div>

<div name="456">我的名字是456</div>

<div name="789">我的名字是789</div>


<style>

    /*选取带有name="456"属性的元素。*/

    div[name="456"]{

        color: pink;

    }

</style>

<div name="123">我的名字是123</div>

<div name="456">我的名字是456</div>

<div name="789">我的名字是789</div>

通用选择器

使用 ***** 表示通用选择器。

<style>

    	/*所有标签的颜色都会变为红色*/

        *{

            color:red;

        }

</style>

<div>标签1</div>

<span>标签2</span>

<p>标签3</p>

伪类选择器

<style>

    /* 未访问的链接 */

    a:link {

      color: #FF0000

    }

    /* 已访问的链接 */

    a:visited {

      color: #00FF00

    }

    /* 鼠标移动到链接上 */

    a:hover {

      color: #FF00FF

    }

    /* 选定的链接 */

    a:active {

      color: #0000FF

    }

    /*input输入框获取焦点时样式*/

    input:focus {

      outline: none;

      background-color: #eee;

    }

</style>

<a href="form表单.html">点我</a>

伪类元素选择器

first-letter

常用的给首字母设置特殊样式：

p:first-letter {

  font-size: 48px;

  color: red;

}
before
/*在每个<p>元素之前插入内容*/

p:before {

  content:"哈哈哈";

  color:red;

}
after
/*在每个<p>元素之后插入内容*/

p:after {

  content:"哈哈哈";

  color:blue;

}

before和after多用于清除浮动。

选择器的优先级

有些时候我们可能会给同一个标签设置多个样式，遇到了重叠项的设置又该听谁的呢？这里就要用到选择器的优先级。

行内样式 1000> id选择器 100 > 类选择器 10 > 标签选择器 1 > 继承样式 0

CSS(上)的更多相关文章

  1. 前端开发 - CSS - 上

    CSS: 1.css的引入方式 2.基础选择器 3.高级选择器 4.选择器的优先级 5.伪类选择器 6.字体样式 7.文本样式 8.背景 9.盒模型border 10.margin 11.paddin ...

  2. 前端之CSS(上)

    CSS CSS 简介 ## CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染 ...

  3. html+css上传文件控件美化

    html上传美化: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. 第一章 HTML+CSS(上)

    HTML 网页的组成 HTML简介 HTML的语法 HTML的常用标签 HTML中的表格和表单 CSS的简单应用 我们这里使用WebStorm开发工具 配置浏览器 常用插件: CodeGlance 代 ...

  5. classname 就是在css上添加类，然后js的类名等于

      <!DOCTYPE HTML>   <html>   <head>   <meta http-equiv="Content-Type" ...

  6. CSS上划线、下划线、删除线等方法

    text-decoration:underline;     下划线 text-decoration:overline;    顶划线 text-decoration:line-through;  删 ...

  7. CSS（上）

    css sprite是什么,有什么优缺点 概念:将多个小图片拼接到⼀个图⽚中.通过 background-position 和元素尺寸调节需要显示的背景图案. 优点: 减少 HTTP 请求数,极⼤地提 ...

  8. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

随机推荐

  1. 第一章 大体知道java语法1----------能写java小算法

    很多人开始学习java时,都是抱着诸如<Thinking in java>.<疯狂java>等书籍,从前到后慢慢翻看,不管其内容重要与否,也不关心自己以后能否使用到.我的建议是 ...

  2. Jmeter -- 对并发认识的误区

    1. 误区 如下图所示,并发数设置为1000,启动时间设置1s,就是每秒发起1000个请求(错误) 上述的设置,表示在1s内启动1000个线程,之后,jmeter便以最大限度的1000个并发进行压测, ...

  3. PHP-配置MySQL

    安装mysql 修改PHP配置文件 修改php安装路径下 php.ini extension=php_mysqli.dll 在代码路径下添加php文件,在里面编辑 <?php phpinfo() ...

  4. 【面试】SSH 框架原理

    SSH 框架原理: 1.通过 Configuration().configure();读取并解析 hibernate.cfg.xml 配置文件2.由 hibernate.cfg.xml中的<ma ...

  5. Java多线程-线程中止

    不正确的线程中止-Stop Stop:中止线程,并且清除监控器锁的信息,但是可能导致 线程安全问题,JDK不建议用. Destroy: JDK未实现该方法. /** * @author simon * ...

  6. 基于 XML 的 AOP 配置(1)

    本文连接:https://www.cnblogs.com/qzhc/p/11969734.html 接下来我将用一个很简单的实例 1. 环境搭建 1.1. 第一步:准备必要的代码 业务层代码: Acc ...

  7. LeetCode 90. 子集 II（Subsets II）

    题目描述 给定一个可能包含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: [1,2,2] 输出: [ [2], [1], [1,2,2 ...

  8. LeetCode 81. 搜索旋转排序数组 II（Search in Rotated Sorted Array II）

    题目描述 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,0,1,2,2,5,6] 可能变为 [2,5,6,0,0,1,2] ). 编写一个函数来判断给定的目标值是否存在 ...

  9. Python基于Pymssql模块实现连接SQL Server数据库的方法

    首先,安装pymssql第三方库pip install pymssql 其次,导入pymssql库 最后们就可以连接数据库了 import pymssql server = "10.10.9 ...

  10. Java-AESUtil

    在线版 http://tool.chacuo.net/cryptaes 要使用 AES/CBC/PKCS7Padding 模式需要添加依赖 <!--AES/CBC/PKCS7Padding--& ...