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. 删除git的远程分支

    命令:$ git push origin [空格][冒号][需要删除的分支名字] git push origin :dev 删除git的凭证的方法: 控制面板\用户帐户\凭据管理器  --->普 ...

  2. Vue_(组件通讯)单项数据流

    Vue单项数据流 传送门 单向数据流:父组件值的更新,会影响到子组件,反之则不行 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据 如果对数 ...

  3. 安装java1.8.0

    安装java 1.删除自带jdk rpm -e --nodeps `rpm -qa | grep java` 2.查看yum库中有哪些jdk版本. yum search java | grep jdk ...

  4. highcharts柱状图、饼状图

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  5. PLSQL报错： ORA-12514：TNS：监听程序当前无法识别连接描述符中请求的服务

    一开始吓尿了,以为自己动着什么东西了把数据库玩坏了,谁知道打开服务发现服务没启动........... 我们要确保数据库服务是启动状态

  6. js如何获取window.location.href跳转后查询字符串的值？

    $("#worked_count").parent().attr("onClick","window.location.href='view/warn ...

  7. Odp.Net 连接Oracle

    1.C#连接Oracle可以不安装客户端,但是需要借助Odp.net 免安装Oracle客户端: 将5个Oracle客户端的类库文件提取出来,放到程序根目录下,分别是oci.dll.Oracle.Da ...

  8. Redis集群配置和常见异常解决

    前文 Redis的Cluster集群,是在分布式且开源环境下最佳的高可用解决方案,可以有效的解决服务器宕机下或高并发下,数据的完整性. 文档前提 Redis 3.0版本或更高版本.(3.0版本开始支持 ...

  9. [idea]创建一个控制台程序

    新建项目时,选择JBoss即可.

  10. centos6密钥验证

    密钥验证: 公钥(服务器上)私钥(客户端)在远程登录软件上可生成SSH密钥对.在服务器上建目录.SSH 再在其中建文件authorized_keys,复制公钥到服务器上此文件中. (1)selinux ...