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. Latex里面的\newtheorem*{xx}{yy}后面的*是干什么的？

    答案: 加了*表示不标号.例如: 同样使用命令: \begin{prb} xx\end{prb} 1. \newtheorem{prb}{Problem Formulation} → Problem ...

  2. 微信小程序_(表单组件)button组件的使用

    微信小程序表单组件button官方文档 传送门 Learn 一.button组件的使用 一.button组件的使用 size:按钮的大小[默认值default] type:按钮的样式类型[默认值def ...

  3. 我的Linux vim配置文件

    map <F9> :call SaveInputData()<CR> func! SaveInputData() exec "tabnew" exec 'n ...

  4. Selenium2Library测试web

    Selenium 定位元素 ▲ Locator 可以id或name来用定位界面元素 也可以使用XPath或Dom,但是,必须用XPath=或Dom=来开头 ▲ 最好使用id来定位,强烈建议强制要求开发 ...

  5. FScapture录屏后导致麦克风无声问题

  6. DP&图论 DAY 5 上午

    DP&图论  DAY 5  上午 POJ 1125 Stockbroker Grapevine 有 N 个股票经济人可以互相传递消息,他们之间存在一些单向的通信路径.现在有一个消息要由某个人开 ...

  7. SSD 页、块、垃圾回收

    基本操作: 读出.写入.擦除: 因为NAND闪存单元的组织结构限制,单独读写一个闪存单元是不可能的.存储单元被组织起来并有着十分特别的属性.要知道这些属性对于为固态硬盘优化数据结构的过程和理解其行为来 ...

  8. Nginx服务应用

    虚拟主机 基于域名的虚拟主机 所谓基于域名的虚拟主机,意思就是通过不同的域名区分不同的虚拟主机,基于域名的虚拟主机是企业应用最广的虚拟主机类型,几乎所有对外提供服务的网站都是使用基于域名的虚拟主机 基 ...

  9. VSCODE开发VUE.JS前端插件

    VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...

  10. shell中变量计算

    year=44 1.let,不需要$引用变量 let m=year+3 echo $m 2.(()) m=$((year+3)) 3.[  ],注意两边一定要有空格 m=$[ year+3 ] 4. ...