Web开发基础（一）：CSS基础

看了一段时间CSS，这个东西所见即所得，没有太复杂的逻辑，很多零碎的东西没必要硬记，写的时候达到效果就可以了

CSS 层叠样式表 (cascade style sheet)

对于一个网页来说
HTML是框架及内容，HTML表达了网页有哪些结构，内容是什么
CSS规定展现样式
JS负责逻辑处理

CSS的使用方式

行间样式

在标签里规定style属性内容

<div style="
	 width: 100px;
	 height: 100px;
	 font: 16px 'Comic Sans MS';">
        html css javascript
</div>

页面级css

在<head>标签里用<style>标签定义应用到整个页面的css

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            font: 16px 'Comic Sans MS';
        }
    </style>
</head>

使用外部css文件

在<head>标签里使用<link>标签导入外部css文件
（浏览器解析到这里时会开一个线程去加载这个外部的css文件）

<link rel="stylesheet" type="text/css" href="/style.css" />
<!--导入目录下名为style.css的文件-->

当一个HTML元素使用了多个样式时，所有的样式会层叠于一个新的虚拟样式表中（叠加），且优先权如下：
内联样式（在 HTML 元素内部）> 内部样式表（位于 <head> 标签内部） > 外部样式表 > 浏览器缺省设置

CSS 基础语法

selector {
	declaration1;
	declaration2;
	... 
	declarationN
}

CSS 规则由两个主要的部分构成：选择器（selector），以及一条或多条声明（declaration）
每条声明由一个属性和一个值组成

复合属性，及一个属性名对应多个意义不同的属性值，如 font 属性，可以认为是一系列相关属性的简写，一般都可以拆分为对应的多个属性名

selector {property: value;[property: value;]}

这里的声明类似键值对

selector

id选择器

定义在HTML标签的属性中

<div id="content" >
    html css javascript
</div>

CSS中对于使用id选择器筛选

#content{
    background-color: red;
}

id与标签是一对一的映射关系

类选择器

与id选择器使用形式类似，不过类选择器是多对多的关系，而且前缀使用"."

<div class="content text" >
    html css javascript
</div>
<div class="text" >
    html+css+javascript
</div>

CSS中对于使用类选择器筛选

.content{
    background-color: red;
}

.text{
    background-color: green;
}

在一个标签具有多个class属性值时，后声明的优先级高

属性选择器

属性选择器定义格式为：[ 属性 [= 值] ]

<div id="content" class="content happy"  style="font-size: 100px" height="10px">
    html css javascript
</div>

<div id="" height="100px">
    html css javascript
</div>

[height ="100px"]{
    font: 16px 'Comic Sans MS';
}

[height]{
    font: 16px 'AmdtSymbols';
}

可对定义了该属性的标签进行选择，也可对某属性取特定值的标签进行选择
对属性进行的选择比属性取特定值的选择优先级高

标签选择器

<div id="" height="100px">
    html css javascript
</div>
<div id="" height="100px">
    css html javascript
</div>

div{
    padding: 10px;
}

以上几种选择器通过比较权重的方式决定优先级

选择器	权重（256进制）
!important	INFINITY 定量正无穷
行间样式（style）属性	1000
id选择器	100
class选择器\|属性选择器\|伪类选择器（eg ::before）	10
标签选择器\|伪元素（eg :hover）	1
通配符选择器 *	0

!important > 行间样式 > id选择器 > class选择器、属性选择器 > 标签选择器 > 通配符

多个选择器间不是覆盖关系，而是按照优先级的叠加关系

父子选择器 / 派生选择器

下面的例子通过派生选择器选择第一个<div>中的<span>

<div id="id" class="test" hegit='100px'>
    <span>html css javascript</span>
</div>
<span id = "haha">html css javascript</span>

div span{
    padding: 10px;
}

上面的 div span也可以写成
.test #haha、#id span、[height] span、[height] #haha等等形式
派生选择器可以将任意类型的选择器组合，也可以多层嵌套，也不一定是直接的父子关系

直接子元素选择器

在派生选择器的基础上加入 父子关系限制

<div id="id" class="test" hegit="100px">
    <em>html css javascript</em>
</div>
<div>
	<span id = "haha"><em>html css javascript</em></span>
</div>

div > em{
    padding: 10px;
}

这样第二个<div>标签中的<em>中的内容就不会被选中

浏览器解析派生选择器（直接父子选择器）时 从右向左排查

并列选择器

下面这个例子用上面学过的选择器无法只选出一个数字定义样式，除非修改HTML
但是用并列选择器可以做到，并列选择器增加了&关系
与派生选择器的语法区别是 各选择器间没有空格

<div>1</div>
<div class="test"><p>2</p></div>
<p class="test">3</p>

div.demo{
    padding: 10px;
}

注意各选择器的顺序，为了避免混淆，没有特殊标识的标签选择器要放到并列选择器的第一个位置

并列选择器比较优先级时权重值相加后比较

分组选择器

以逗号分隔的多个选择器

div, .demo, #first{
    padding: 10px;
}

<div>标签及class="demo"以及id="first"的标签都使用该样式定义（被同时选中）

选择相邻兄弟

选择紧接在另一个元素后的元素，而且二者有相同的父元素
例如，如果要增加紧接在一级标题后出现的段落的上边距，可以这样写：

h1 + p {
	margin-top:50px;
}

CSS伪类

CSS 伪类用于向某些选择器添加特殊的效果
选择到某些符合特定条件的元素
伪类名大小写不敏感
行内样式表无法使用伪类

语法
注意格式冒号:两边不能有空格 : )

selector:pseudo-class {
	property: value;
}

<a>标签与伪类的结合使用

a:link {color: blue}
a:visited {color: purple}
a:hover {color: red}
a:active {color: yellow}

link：选择链接
hover：定义获得鼠标焦点时，展现的样式
visited：被访问过后
active：被点击时

CSS 中，
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
a:active 必须被置于 a:hover 之后，才是有效的

回到顶部（一次性变色）

first-child 伪类

selector : first-child{property: value;}

选择作为别人第一个子元素的且被selector选中的元素
即增加条件：作为某些元素的第一个子元素

lang 伪类
为不同的语言定义特殊的规则

CSS伪元素

CSS 伪元素用于向某些选择器设置特殊效果
语法

selector:pseudo-element {property:value;}

first-line 伪元素
向文本的首字母设置特殊样式
只能用于块级元素

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

first-letter 伪元素
用于向文本的首字母设置特殊样式
只能用于块级元素

font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear

关于颜色的定义

预置选择：red、blue、yellow … transparent（透明色）

RGB码方式：分别表示红绿蓝三种颜色的饱和程度，及用量
R G B
00 ~ FF 00 ~ FF 00 ~ FF

RGB码的简写：若R/G/B都为两位相同数字（同RGB码，16进制），可简写为1位

rgb函数：rgb(r,g,b)（十进制）

2019/5/14

posted @ 2019-05-14 11:59 kafm 阅读(56) 评论(0) 编辑收藏举报

刷新页面返回顶部