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. 消费端ACK和重回队列

    使用场景 消费端ACK和重回队列 消费端ACK使用场景: 1.消费端进行消费的时候,如果由于业务异常我们可以进行日志记录,然后进行补偿. 2.由于服务器宕机等严重问题,那我们就需要手工进行ACK保障消 ...

  2. triplet

    询问次数<=min(2*n,n+35) 一种类似hash的交互题 部分分n=5,限制10次 发现都问出来可以通过次数和大小确定所有的值和对应位置! n比较大 发现(X1,X2,i)能确定一些情况 ...

  3. tkmybatis逆向工程关于tinyint的玄学问题

    数据库中存储的数据类型是tinyint(1) state tinyint(1) 状态0-未完成:1-待提交:2-待支付:3支付失败: 不为空 tinyint(1)存储的时候会存储下面长度的数字 但是在 ...

  4. Qt第三方库libvlc-qt——ubuntu上编译、安装，测试

      cmake 3.0编译安装(最低版本要求): sudo apt-get install ncurses-dev sudo apt-get install build-essential 下载cma ...

  5. XAMPP是什么？

    XAMPP=Apache + MySQL + PHP + Perl,是一个完全免费,易于安装和使用Apache发行版,包含了Apache.MySQL.PHP和Perl.支持Windows.Linux和 ...

  6. Mysql密码忘记，修改密码方法

    1.set password for ‘root’@’localhost’ = password(‘czllss’); -- czllss为新密码

  7. jsonp 原理 并模拟实现一个简单的jsonp

    jsonp产生的背景 1.从原网站向目标网站(服务端)发送ajax请的时候,由于浏览器的安全策略(这两个网站只要域名,端口,协议 有一个不同就不允许请求访问)导致跨域,从而请求无法正常进行. 2.We ...

  8. 阶段3 3.SpringMVC·_05.文件上传_3 文件上传之Springmvc方式上传原理分析

    需要配置文件解析器这个对象 id配置时候必须叫做mutipartResolver 最终

  9. openLdap安装教程

    环境 操作系统:centOS 7.0 OpenLDAP:2.4.X 安装 从yum源安装 yum install openldap openldap-servers openldap-clients ...

  10. Kibana 创建索引 POST 403 (forbidden) on create index

    一.问题描述: Kibana创建索引:kibana > management > index patterns > create index pattern 索引名称: mercha ...