CSS基础

一、CSS简介

css概念

    CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。

    当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。

css语法

css注释

/*这是注释,随便写,不影响css代码*/

二、CSS的引用方式

行内引用

  行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

内部样式

  嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部样式

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

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

三、CSS选择器

基本选择器

  •   元素(标签)选择器 p {color: "red";}
  •   ID选择器 #i1 { background-color: red; }
  •   类选择器 .c1 { font-size: 14px; } p.c1 { color: red; }  注意: 样式类名不要用数字开头(有的浏览器不识别)。 标签中的class属性如果有多个,要用空格分隔。
  •   通用选择器  * { color: white; }

组合选择器

  •   后代选择器 /*li内部的a标签设置字体颜色*/ li a { color: green; }
  •   儿子选择器 /*选择所有父级是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; }
  •   毗邻选择器 /*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin: 5px; }
  •   弟弟选择器 /*i1后面所有的兄弟p标签*/ #i1~p { border: 2px solid royalblue; }

属性选择器 /*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; }

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含(字符串包含)hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/
[title~="hello"] {
  color: green;
}

分组和嵌套

  •   分组

    当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

    例如:

div, p {
  color: red;
}

    上面的代码为div标签和p标签统一设置字体为红色。

    通常,我们会分两行来写,更清晰:

div,
p {
  color: red;
}
  •   嵌套

    多种选择器可以混合起来使用,比如:.c1类内部所有p标签设置字体颜色为红色。

.c1 p {
  color: red;
}

伪类选择器 /* 未访问的链接 */ a:link { color: #FF0000 } /* 已访问的链接 */ a:visited { color: #00FF00 } /* 鼠标移动到链接上 */ a:hover { color: #FF00FF } /* 选定的链接 */ a:active { color: #0000FF } /*input输入框获取焦点时样式*/ input:focus { outline: none; background-color: #eee;

伪元素选择器

  •   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多用于清除浮动。

四、选择器的优先级

  1. CSS继承
  2. 选择优先级

  继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {
  color: red;
}

  此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。

  我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {
  color: green;
}

  此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。

  1. 选择器优先级

  我们上面学了很多的选择器,也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式,那浏览器根据什么来决定应该应用哪个样式呢?

  其实是按照不同选择器的权重来决定的,具体的选择器权重计算方式如下图:

  除此之外还可以通过添加 !import方式来强制让样式生效,但并不推荐使用。因为如果过多的使用!import会使样式文件混乱不易维护。

  万不得已可以使用!import

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python攻城狮

jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示

jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。(write less,do more.)

1173
来自专栏Spring相关

使用vue模拟购物车小球动画

1892
来自专栏一个爱吃西瓜的程序员

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

3516
来自专栏HTML5学堂

关于定位position的相关知识

HTML5学堂 - 刘国利:最近有好几个学生和自己聊起,总觉得定位有点懵。因此在本文中,主要书写了相对定位relative和绝对定位absolute,定位的用法...

3135
来自专栏吴裕超

给新生成的节点(动态生成节点)绑定事件方法总结

第一种 jquery写法 $('.father').on('click',',child',function(){}) $(document).on('cli...

3496
来自专栏向治洪

Android View底层到底是怎么绘制的

Android绘制链图: ? 网上很多讲Android  view的绘制流程往往只讲到了Measure - Layout - Draw。 但是,这只是一个...

2579
来自专栏余生开发

插件集--页面滚动scrollreveal.js

scrollReveal.js 不依赖其他任何文件。不支持 IE10 以下 基本方法

2654
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(一)选择器

CSS 全称为 Cascading Style Sheets,中文翻译为“层叠样式表”,简称 CSS 样式表,所以称之为层叠样式表(Cascading Styl...

984
来自专栏学海无涯

Android开发之自定义View(一)

Android常见的自定义控件有三种方式: 继承View 继承原有的控件,在原有控件的基础上进行修改 重新拼装组合 今天先来简单说一说第一种也是最复杂的一种~~...

2887
来自专栏HTML5学堂

2016.04第4周 群问题分享

HTML+CSS img图片下面产生3px间隙问题 2016.4.25~2016.4.29 核心概念 行元素垂直方向的对齐方式和行块元素转换 参考答案 方法一:...

36814

扫码关注云+社区

领取腾讯云代金券