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. Python实现telnet命令测试防火墙

    Python实现telnet命令测试防火墙 telnet主要用于测试主机端口是否开通 ping主要是用来测试网络是否畅通和主机是否正在使用 使用Python实现Telnet测试主机端口是否开通的功能. ...

  2. Vue_(组件)过渡效果

    Vue.js进入/离开 & 列表过渡 传送门 进入/离开过渡效果:Vue在插入.更新或移除DOM时,可以设置一些动画效果: 过渡效果中也提供了对应的钩子函数,这些钩子函数需要在<tran ...

  3. $\LaTeX$数学公式大全6

    $6\ Binary\ Operation/Relation\ Symbols$$\ast$ \ast$\star$ \star$\cdot$ \cdot$\circ$ \circ$\bullet$ ...

  4. Pycharm添加python2解释器

    Anaconda3+python3环境下如何创建python2环境(win+Linux下适用,同一个anaconda下py2/3共存) conda info -e 查看python2的路径 Pycha ...

  5. 前世今生：Hive、Shark、spark SQL

    Hive (http://en.wikipedia.org/wiki/Apache_Hive )(非严格的原文顺序翻译)  Apache Hive是一个构建在Hadoop上的数据仓库框架,它提供数据的 ...

  6. ios修改UIIMage大小

    /** * 改变图片的大小 * * @param img 需要改变的图片 * @param newsize 新图片的大小 * * @return 返回修改后的新图片 */ - (UIImage *)s ...

  7. 二、Spring Boot 中maven中dependencies所有的jar包都报红，install报错(https://repo.maven.apache.org/maven2): Not authorized , ReasonPhrase:Authorizatio

    问题一:现象:打开SpringBoot项目后,所有依赖包都报红色波浪线 1.install报错(https://repo.maven.apache.org/maven2): Not authorize ...

  8. GitHub：Oracle

    ylbtech-GitHub:Oracle 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. https://github.com/oracle 2.   6 ...

  9. struts数据回显

    数据回显,必须要用struts标签! Action中: // 进入修改页面 public String viewUpdate() { // 模拟一个对象(先获取一个id,再根据id调用service查 ...

  10. JNI知识扩展

    JNI(Java Native Interface,JAVA原生接口) 使用JNI可以使Java代码和其他语言写的代码(如C/C++代码)进行交互. 问:为什么要进行交互? |- 首先,Java语言提 ...