震惊 CSS快速入门！！！

李恩泽的博客
142 阅读9分钟

Css

Css基本概念

  • 什么是Css?

css指层叠样式表(Cascading Style Sheets），通俗的理解就是可以为标签元素带上颜色、大小、粗细状态等表现形式

样式通常存储在样式表中，也可以独立定义一个外部样式表文件，这些文件通常存储后缀为css

有了CSS，html中大部分表现样式的标签就可以不用了

html可以专心的只负责文档的结构和内容，而表现形式完全交给CSS，这样也就使得html文档变得更加简洁

Css引入方式

在页面中集成使用css的方式有主要三种

内联式

直接在页面标签元素上进行编写，通过style属性定义

<div style="background: #00ff00">
    <p>
        这个地方有一个美丽的背景色
    </p>
</div>

嵌入式

可以在文档页面任意位置通过style标签进行编写，编写时需要使用对应的选择器对应样式的生效范围

<style type="text/css">
    body {
   		background: black;
    }
</style>

外部式

在外部单独定义一个css样式表文件，进行样式编写，之后在引入到html文件中

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

优先级

在相同的样式定义时，会遵循如下优先级规则

内联式 > 嵌入式 > 外部式 (就近原则)

Css基本语法

css语法由两部分构成：选择器、一条或多条样式声明

当属性中的值为若干单词时，需要加引号

div { 
	color: red;
    background: green;
    font-family: "sans serif";
}

属性(property)是您希望设置的样式属性(style attribute)，每个属性有一个值，属性和值之间被冒号分开

Css选择器

标签选择器

影响范围大，常做通用设置，或用在层级选择器中

<p>一段</p>

p{
	color: blue;
}
/* 定义p标签文字为蓝色 */

类选择器

通过类名来选择元素，一个类可以用于多个元素，一个元素也可以使用多个样式类，应用灵活，可复用

是CSS中使用最多的一种选择器，需要注意的是类名的第一个字符不能使用数字

.big{
	font-size: 20px
}
/*定义big类字体大小为20像素*/
.red{
	color: red;
}
/*定义类为red的字体颜色为红色*/

使用类选择器可以在标签处通过class属性使用，多个属性使用空格隔开

<p class="big red">再来一段</p>

类选择器还可以基于所属标签进行派生选择

<p class="red">再来一段</p>
<div class="red">
    文字测试
</div>

那么页面中只有div标签的文本会变为红色

div.red{
	color: red;
}
/* 在页面中只有div类为red的字体颜色会变为红色 */

属性选择器

属性选择器就是对指定属性的HTML元素进行设置，而不限于class和id属性

<a href="https://www.baidu.com">这是一个连接</a>
<p href="test">测试</p>

那么希望对于所有拥有href属性的标签进行样式设置，可以这样编写

[href]{
	color: blue;
}
/*为所有具有href属性的元素设置字体颜色*/

还支持精确进行属性匹配: =

[href="test"]{
    font-size: 20px;
}
/*为属性为test的元素设置字体大小*/

使用属性的值中包含所匹配的单词的方式进行匹配: ~=

但是不包含下划线和连字符的

<p attr="test">测试</p> √
<p attr="test-xx">测试</p> x
<p attr="test_xx">测试</p> x
<p attr="test xx">测试</p> √

[attr~=test]{
    font-size: 20px;
}
/*为属性包含test的元素设置字体大小*/

从开头整个匹配或带有连字符的属性值: !=

适用于由连字符分隔的属性值

<p attr="test">测试</p> √
<p attr="test-xx">测试</p> √
<p attr="test_xx">测试</p> x
<p attr="test xx">测试</p> x

[attr|=test]{
    font-size: 20px;
}
/*为单词为test或开头为test-的元素设置字体大小*/

从属性值的开头进行匹配: ^=

<p attr="test">测试</p> √
<p attr="test-xx">测试</p> √
<p attr="test_xx">测试</p> √
<p attr="test xx">测试</p> √

[attr^=test]{
    font-size: 20px;
}
/*为开头包含test的所有元素设置字体大小*/

从属性值的结尾开始匹配：$=

<p attr="test">测试</p> √
<p attr="xx-test">测试</p> √
<p attr="xx_test">测试</p> √
<p attr="xx test">测试</p> √

[attr$=test]{
    font-size: 20px;
}
/*为结尾是test的所有元素设置字体大小*/

只要含有则匹配: *=

<p attr="test">测试</p> √
<p attr="xx-test">测试</p> √
<p attr="xx_test">测试</p> √
<p attr="xx test">测试</p> √

[attr*=test]{
    font-size: 20px;
}
/*为含有test的所有元素设置字体大小*/
  • 总结一下几种属性选择的匹配方式
    • ~=：用于选取属性值中包含指定词汇的元素
      • 必须是单独的词汇，不能是带有连字符或下划线组成的单词。
    • |=：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
      • 可以有连字符组成，word或者是word-wild
    • ^=：匹配属性值以指定值开头的每个元素
    • $=：匹配属性值以指定值结尾的每个元素
    • *=：匹配属性值中包含指定值的每个元素

层级选择器

主要应用在标签嵌套的结构中，通过层级，限制样式的作用范围

<div class="header">
    <p class="title">标题1</p>
    <span class="author">作者1</span>
    <p class="content">
        主要内容
    </p>
</div>

<div class="footer">
    <p class="title">标题2</p>
    <span class="author">作者2</span>
    <p class="content">
        主要内容2
    </p>
</div>

可以嵌套进行样式定义

.header .title{
	color: gold;
	font-size: 30px;
}
/*生效所有header类下的title类*/

.header .author{
	color: blue;
	font-size: 15;
}
/*生效所有header类下的author类*/

.header p{
	font-weight: bold;
}
/*生效所有header类中的p标签*/

ID选择器

通过ID名进行元素选择，元素的ID名定义时在整个文档属于唯一

通过ID选择器只能对应页面元素中的一个

ID名通常作为JS脚本定位使用，不推荐ID选择器

<p id="title">标题1</p>

#title{
	font-size: 25px;
	font-weight: bold;
}

链接伪类选择器

链接伪类选择器经常用于控制连接访问状态

常见状态有：活动状态、已访问状态、未被访问状态、鼠标悬停状态

<a class="baidu" href="https://www.baidu.com">访问这里</a>

对连接进行访问状态的样式设置

.baidu:link{
	color: blue;
}
/*未访问过的连接*/

.baidu:visited{
	color: black;
}
/*访问过的连接*/

.baidu:hover{
	color: gold;
}
/*鼠标划过的连接*/

.baidu:active{
	color: red;
}
/*已选中的连接*/

注意

  • hover必须定义在link和visited之后，才是有效的
  • active必须定义在hover之后，才是有效的

CSS选择器权重

当有多个同类样式作用于同一个元素时，权重高的样式对元素起作用，权重相同时后写的样式覆盖前面写的

选择器权重值如下，遵循就近原则

  • 内联式样式：1000
  • ID选择器：100
  • 类选择器：10
  • 标签选择器：1

还可以使用!important语句将样式权重设置为10000，!important写到样式属性值后对该样式进行权重设置

.test{
	color: red !important;
}

Css基本属性

宽高属性

width: 设置元素(标签)的宽

height: 设置元素(标签)的高

#button{width:100px; height:100px;}

背景属性

background: 设置背景色或背景图

body{
	width: 100%;
	height: 100%;
	background: #00FF00 url("../img/1.jpg") no-repeat ;
}

background属性还可以分解为如下几个设置:

  • background-color: 设置背景颜色
  • background-image: 设置背景图片地址
  • background-repeat: 设置图片如何重复平铺，可选参数有
    • repeat: 全局重复
    • repeat-x: 水平方向重复
    • repeat-y: 垂直方向重复
    • no-repeat: 图片只显示一次）
  • background-position: 设置图片的位置，可选参数有
    • left、right、center
  • background-attachment: 设置图片是固定的还是会随页面滚动，可选参数有
    • scroll: 背景图片会随着页面其余部分的滚动而移动
    • fixed: 页面的其余部分滚动时，背景图像不会移动

注意：在背景图片路径填写时，如果使用内联式写法则从当前页面路径开始查找相对路径，如写在外部CSS文件中，则以CSS文件为相对基础。

文本属性

color: 设置标签中的文字颜色

p{color: red;}

font-size: 设置标签中的文字大小

p{font-size: 12px;}

font-family: 设置元素中的文字字体

p{font-family:"微软雅黑"}
/* 为了避免中文兼容问题，常用字体的英文标识 */
p{font-family:"Microsoft Yahei"}

font-widght: 设置元素中的文字是否加粗

p{font-widght:bold;} /* 设置加粗 */
p{font-widght:normal;} /* 设置不加粗 */

line-height: 设置元素中的文字行高

p{line-height:24px;}

text-decoration: 设置元素中文字的下划线

支持如下属性

  • underline：定义文本下的一条线
  • overline：定义文本上的一条线
  • line-through：定义穿过文本的一条线
  • blink：定义闪烁的文本
  • inherit：规定应该从父元素继承text-decoration属性的值
p{text-decoration:underline;}

text-align: 设置元素中文字对齐方式

p{text-align:center;}

text-indent: 设置元素中文字的首行缩进

p{text-indent:24px;}

Css盒子模型

在html标签中，所有的标签都有自身具备的大小款高，以及外边框、边距，这被称为盒子模型

一个盒子模型主要的构成是内容(content)、内边距(padding)、边框(border)、外边距(margin)

内边距

padding: 设置元素包含的内容和元素边框的距离，也叫内边距

p{
    padding: 100px;
}

这个样式属性也可以拆分成以下单独四种，可以分别设置对应位置的内边距

  • padding-top：设置上内边距
  • padding-bottom：设置下内边距
  • padding-left：设置左内边距
  • padding-right：设置右内边距

外边距

margin: 设置元素和外界的边距，也叫外边距

p{
    margin: 10px;
}
/*同时设置四个边距为10px*/

与padding类似，margin属性也可以拆分为四个方向的单独设置

  • margin-top：设置上外边距
  • margin-bottom：设置下外边距
  • margin-left：设置左外边距
  • margin-right：设置右外边距

边框属性

border: 设置元素周围的边框

p{
    border: 10px double blue;
}

依次设置：边框宽度(border-width)、边框样式(border-style)、边框颜色(border-color)

边框位置

  • border-top: 顶边框

  • border-buttom: 底边框

  • border-left: 左边框

  • border-right: 右边框

[attr]{
    border-top: 5px inset blue;
    border-bottom: 5px inset green;
    border-left: 5px outset red;
    border-right: 5px outset red;
}
边框样式
  • dotted：点状
  • solid：实线
  • double：双线
  • dashed：虚线
  • groove：3D凹槽边框
  • ridge：定义3D垄状边框
  • inset：定义3D inset 边框
  • outset：定义3D outset边框
  • inherit：规定应该从父元素继承边框样式
边框颜色

border-color: 属性用于设置四个边框的颜色

p{
    border-color: red;
}
圆角边框

border-radius: 设置圆角边框

如果在border-radius属性中只指定一个值，那么将生成4个圆角

如果想要在四个角上一一指定，可以使用以下规则

  • 四个值: 左上角，右上角，右下角，左下角。
  • 三个值: 左上角, [右上角,左下角]，右下角
  • 两个值: [左上角,右下角]，[右上角,左下角]
  • 一个值： 四个圆角值相同
avatar
文章
阅读
粉丝