前端基础之css

时间 2019-11-30

标签前端基础 css 栏目 CSS 繁體版

原文原文链接

css介绍

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

当浏览器读到一个样式表，它就会按照这个样式表对文档进行格式化（渲染）。浏览器

每一个css样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每一个声明以后用分号结束。字体

css的几种引入方式

行内样式

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

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

内部样式

嵌入式是将css样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式以下：code

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

外部样式

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

<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;}input

注意：

样式类名不要用数字开头（有的浏览器不认）

标签中的class属性若是有多个，要用空格分隔。

通用选择器：　　* {color:white;}

组合选择器

后代选择器：　　li a {color:green;} /* li内部的a标签设置字体颜色*/

儿子选择器：　　div>p {font-family; "Arial Black", arial-black, cursive;} /*选择全部父级是<div>元素的 <p>元素*/

毗邻选择器：　　div+p {margin: 5px;} /*选择全部紧接着<div>元素以后的<p>元素*/

弟弟选择器：　　#il~p {border: 2px solid royalblue;} /*i1后面全部的兄弟p标签*/

属性选择器

/*用于选取带有指定属性的元素。*/

p[title] {color: red;}

/*用于选取带有指定属性和值的元素*/

p[title='213'] {color: green;}

/*找到全部title属性以hello开头的元素*/

[title^='hello'] {color:red;}

/*找到全部title属性中包含（字符串包含）hello的元素*/

[title*='hello'] {color:red;}

/*找到全部title属性以hello结尾的元素*/

[title$='hello'] {color: yellow;}

/*找到全部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输入框获取焦点时样式*/

伪元素选择器

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

选择器的优先级

css继承

继承是css的一个主要特征，它是依赖于祖先-后代的关系。继承是一种机制，它容许样式不只能够应用于某个特定的元素，还能够应用于它的后代。

body {color : red ;}

此时页面上全部标签都会继承body的字体颜色，然而css继承性的权重是很是低的，是比普通元素的权重还要低的0。

咱们只要给对应的标签设置字体颜色就可覆盖它继承的样式。 p { color : green ;}

此外，继承是css重要的一部分，咱们甚至不用去考虑它为何可以这样，但css继承也是有限制的，有一些属性不能被继承，如：border,margin,padding,background等。

选择器的优先级

咱们上面学了不少选择器，也就是说在一个HTML页面中有不少方式找到一个元素而且为其设置样式，那浏览器根据什么来决定应该应用哪一个样式呢？

除此以外还能够经过!important方式来强制让样式生效，但并不推荐使用，由于若是过多的使用！important会使样式文件混乱不易维护