CSS入门基础学习（上）

css是层叠样式表的简称，有时称为css样式表或级联样式表。

css是一种标记语言，用于设置HTML页面中的文本内容，图片的外形，以及版面的布局和外观显示样式。可以美化HTML的外观页面看起来更加简介美观（HTML是结构的呈现，css则是样式的实现）。

css由两部分组成：选择器以及一条或多条声明。

语法：

<style>

选择器{样式}

给谁改{改为什么}

<style>

例如：

<style>
p {color:red;}
</style>

（1）选择器是用于指定HTML标签，花括号内是对该对象设置的具体形式

（2）属性与属性位置之间用英文“：”分开

（3）多个键值对之间用英文“；”分开

CSS 代码风格

1.样式格式

一般情况下大多用于展开类型的模式。

如下所示：

<style>p {color:red;font-size:13px;}
</style>

2.样式大小写

全部使用小写字母，特殊的情况除外。

3.空格规范

（1）属性值前面，冒号后面都需要保存一个空格

（2）选择器和大括号之间保留一个空格

CSS 选择器的作用

根据不同的需求把不同的标签选择出来

选择器的分类：

选择器分为基础选择器和复合选择器两大类

基础选择器是有单个选择器组成的

基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

标签选择器（按标签名分类）

格式：

标签名 {

属性1：属性值1；

属性2：属性值2；

........................

}

例如：如下代码将h4标题变成紫色

 <style>h4 {color: blueviolet;}</style>

类选择器：

可单独选择一个标签或者多个标签发生相应的该表

语法格式：

.类名 {

属性1：属性值1；

属性2：属性值2；

}

应用在HTML结构之中的形式如下：

<li class="类名称"> 内容 </li>

结构之中需要调用class属性来调用相关的class类

样式点定义，结构类（class）调用，一个或多个开发时常用。

注意：

（1）类选择器使用“.”（英文形式）进行标识，后面紧跟类名（自定义）

（2）可以理解为给这个标签起一个名字来表示

（3）长名称或词组可以使用横线来为选择器命名

（4）不要使用纯数字、中文等命名，尽量使用英文字母表示

（5）命名要有意义，尽量要是读代码的人可以看到懂以下是在写什么东西

（6）命名格式规范仍要遵循

单个类名的使用如下：

<style>.bule {color: blueviolet;}
</style>
<h4 class="bule">让我们在山的顶峰相遇吧</h4>

运行之后的结果如下图所示，只是将h4标签中的一个进行了色彩改变：

多类名：（一个标签可以使用多个类名）

使用方式如下：

<li class="red size">内容</li?

（1）债标签class属性之中可以写多个类名之间使用空格将其分开

（2）这个标签可以分别具有这些类名的形式

多类名的使用场景：

（1）可以把一些标签元素相同的样式共同放入一个类中

（2）这些标签都可以调用这个公共类，然后再调用独有的类

（3）节省了CSS的空间，也使修改整体格式变得简单

多类名的使用方式如下代码所示：

<style>.bule {color: blueviolet;}.size {font-size: 20px;}
</style>
<p class="size bule">千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p><p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p class="size">此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>

运行结果是将其中一个文字即变色也改变了大小，而一个文字段只进行了改变大小没有更改其颜色，运行的结果如下图所示：

id选择器：

HTML元素以id属性来设置选择器，CSS中id以“#”来定义

语法：

<style>
#id {color:....;background-color:....;.............;}
</style>

具体的相关使用方式如下：

<style>#nav {color:pink;font-size=12px;}
</style>
<body><div id="nav">内容</div>
</body>

代码如下所示：

    <style>.bule {color: blueviolet;}.size {font-size: 20px;}#color {color:red;}</style><p class="size bule">千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p><p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p><p class="size">此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p><p id="color"> 单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。</p>

color 这个id选择器只能使用一次

样式#定义，结构id调用，只能调用一次，一旦被调用之后其他标签则不可调用

与class之间的区别：

（1）类相当于人的名字，可以进行重复使用

（2）id则相当于人的身份证号码，一个人只能有一个

通配符选择器：

用“*”来定义，它表示选择页面中所有元素（标签）

语法：

<style>* {color:sky blue;}
</style>

通配符选择器不需要调用，自动给所有元素格式，只有在特殊情况下才会被使用。

例如：清除内外边距

* {margin:0;padding:0;}

对所有的文字进行更改颜色的代码如下所示:

   <style>* {color:aquamarine;}</style>

CSS字体属性：

CSS Font（字体）属性用定义字体系列、大小、粗细和文字样式（如斜体）

字体系列：

CSS使用 font-family属性定义文本的字体系列

（1）各种字体之间必须使用的英文逗号分开

（2）一般情况下，如果有空格隔开的多个单词组成的字体加引号

（3）尽量使用系统自带的字体，保证在每个用户处可以正常显示

（4）最常见的几个字体：Microsoft YaHei、tahoma,arial、Hiagino Sans

如果一个font-family有多个字体，那么先观察第一个字体是否在系统中存在，存在则应用第一个，不存在则依次向后寻找存在的字体。

使用方式如下:

<style>p {font-family="Microsoft YaHei"、"tahoma,arial"、"Hiagino Sans"}
</style>

字体大小：

CSS使用font-size定义字体大小

p {font_size:20px;}

（1）px（像素）大小是我们网页最常用的一个单位

（2）谷歌浏览器默认字体大小为16px

（3）不同浏览器可能的默认显示的字号大小不同，我们尽量给一个明确值大小，不要默认其大小

（4）可以给body指定整个页面文字的大小

标题、标签比较特殊，需要单独指定文字大小

字体粗细:（直接写数字，不用加像素值px）

使用font-weight属性设置字体的粗细

参数：

normal	正常默认字体相当于number=400
bold	粗体。相当于number=700
bolder	特粗体，IE5+
lighter	LE5+细体
number	后面直接跟数字便可调节字体的粗细

文字样式

使用font-style设置文本的风格

p {font-style:normal;}

属性值包含italic斜体样式，主要作用就是让倾斜的字体不再倾斜

字体复合属性：

字体属性可以把以上的文字样式都综合起来使用，可节省代码的长度。

形式如下：

body {

font: font-style font-weight font-size/line-height font-family

}

其中font-size和font-family必须得书写，否则将不会被正常执行。

body { font: italic 700 16px 'microsoft yahe'}

将body的代码改为p标签，则运行结果如下所示：

（1）使用font属性时，必须按照上面的语法格式书写其中的顺序不得进行更改，并且各个属性之间使用空格分开

（2）不需要设置的属性可以直接忽略（即取默认值）但必须保留font-size和font-family属性，否则font会不起作用

文本属性

css text（文本）属性可定义文本的外观，比如颜色，对齐文本，装饰文本，文本缩进，行间距等等。

文本颜色（color）

color属性用于定义文本的颜色

div {

color:red;

}

表示形式	属性值
RGB代码	rgb(255,0,0)或rgb(100%,0%，0%）
预定义颜色	red,green,bule,pink
十六进制	#FF0000,#FF6600,#29D794

开发中常用十六进制

对齐文本(text-align）

text-align属性用于设置元素内文本内容的水平对齐方式

例如：

div {text-align:center;
}

left	左对齐（默认）
center	居中对齐
right	右对齐

举一个实例，代码如下所示（将一个文本居中对齐）：

    <style>.align {text-align: center;}</style>
<body><h4  class="align">让我们在山的顶峰相遇吧</h4><h4 class="align"> 一起去吧，更远的地方</h4>
</body>

代码运行的结果如图所示：

装饰文本（text-decoration）

text-decoration属性规定添加到文本的修饰，可以给文本加下划线，删除线，上划线等等。

div {

text-decoration:underline;

}

属性值如下表所示：

属性值	描述
none	默认无装饰（可以使有下划线的不存在下划线）
underline	下划线，链接a自带下划线
overline	上划线（几乎不用）
line-through	删除线（不常用）

举一个实例，如下所示将链接a的下划线去掉，代码如下：

    <style>a {text-decoration: none;}</style>
<body><a href="https://baike.baidu.com/item/%E5%AF%B9%E8%A7%92%E5%B7%B7%E4%B9%90%E9%98%9F/23659863?fr=aladdin" target="_blank"><h1>对角巷乐队</h1></a>
</body>

运行的结果如下图所示：

文本缩进（text-indent）

text-indent属性用来指定文本第一行的缩进，通常是将段落的首行缩进

div {

text-indent: 20px;

}

通常设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至长度可以是负值

p {

text-indent:2em;

}

em是一个相对单位，就是当前元素一个文字的大小的距离，如果当前元素没有设置大小，则会按照父元素的一个文字大小。

一般常用em设置缩进，它只管缩进几个字对于开发人员来说很方便

我们已经学了这一部分内容了，那我们做一个让所有段落缩进的操作吧，代码如下：

    <style>p {text-indent: 2em;}</style>
<body><p>千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p><p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p><p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p><p> 单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。</p>
</body>

运行之后的结果如下所示：

行间距（line-height）

line-height属性用于设置行间的距离（行高）

p {

line-height:26px;

}

CSS引入方式

内部样式表：

内部样式表是写到HTML页面内部，是将所有css代码抽取出来，单独放到一个<style>标签

<style>

div {

color:red;

font-size:19px;

}

</style>

（1）<style>标签可以放在html文档的任意地方，但一般放在<head>标签中

（2）通过此种方式，可以方便控制当前的整个页面中的元素样式设置

（3）代码结构清晰，但是并没有实现结构与样式完全分离

（4）使用内部样式设定，也被称为嵌入式引入

行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定css样式

<div style="color :red; font-size:19px}内容</div>

（1）style其实就是标签的属性

（2）在双引号中间，写法要符合css规范

（3）可以控制当前的标签设置想要的样式

外部样式表

实际开发中都是外部样式表核心是将其单独写到css文件中，之后引入css到html文档中

引入分为两步：

（1）新建一个后缀名.css的样式文件，把所有css代码都放入此文件中

（2）在html页面中，使用<link>标签引入此文件

格式如下：

<link rel = "stylesheet" href = "css文件路径">

属性	作用
rel	定义当前文档与被链接的文档之间的关系，在这里需指定为stylesheet，表示被链接文档是一个样式表
href	定义所链接外部样式表文件的URL，可以为相对/绝对路径

使用外部样式表设定css，通常也被称为外链式和链接式引入

该<link>标签写在<head>标签之中

chrome调试工具

（1）Ctrl+滚轮可以放大放小代码

（2）左边是html，右边是css

（3）右边css可改动数值和查看颜色

（4）Ctrl+O复原浏览器大小

（5）点击元素，发现右侧无样式引入，极有可能是类名或样式引入错误

（6）如果有样式单眼视前有黄色感叹号提示，则为样式书写错误

Emmet语法

快速生成html结构语法

（1）生成标签直接输入标签名按tab键即可

（2）如果想要生成多个相同的标签加上*即可

div*3 可以生成三个div标签

（3）如果有父子级关系的标签可以用>

ul>li 表示li是ul的子标签

（4）如果有兄弟关系的标签，用+就可以了

div+p

（5）如果生成带有类名或者id名字的，直接写.demo或#two 按tab键即可

（6）如果生成的div类名是有顺序的，可以用自增符￥

（7）如果想要在生成标签内部写内容时，将内容写在{ }中

例 .nav <div class="nav"> </div>

#na <div id = "na" > </div>

p.nav则是对标签p进行处理

.demo$*5 有五个div里的class分别为1,2,3,4,5的标签

div {内容}*n 就有n个 div+内容的

快速生成css样式语法

css基本采取简写形式即可

（1）比如 w200+tab 为width：200px；

（2）比如lh26+tab 为line-height：26px；

复合选择器

后代选择器

后代选择器又称为包含选择器，可以选择父元素里的子元素，其写法如下所示（将外层标签写在前面。内层标签写在后面用空格分开）

语法：

元素1 元素2{样式声明}

表示选择元素1里所有元素2（元素2为元素1的后代元素）

例如：

ul li {样式声明} 选择ul标签里的所有li标签

（1）元素1和元素2用空格隔开

（2）元素1是父级，元素2是子级最终选择的元素是元素2

（3）元素2可以是儿子，孙子都可以，只要是元素1的后代就行

例如：

.nav li a{color:red;}找类nav中li的标签a

具体的应用方式如下所示：

    <style>.nav li a{color:red;}</style>
<body><ul class="nav"><li><a href="#">我好想爱这个世界啊！！</a>我好想爱这个世界啊！！</li></ul>
</body>

运行的结果如下所示，只有引用nav中的li标签中的a链接标签进行了变色：

子选择器

子选择器只能作为某元素的最近一级子元素。简单的理解就是选择亲儿子元素

语法：

元素1 > 元素2 {样式声明}

表示选择元素1里所有直接后代元素2

例如：

<div>

<p> 变 </p>

<p>变</p>

<ul>

<p>不变</p>

</ul>

</div>

（1）元素1和元素2 中间用大于号隔开

（2）元素1是父级，元素2是子级，最终选择的元素为元素2

（3）元素2必须是亲儿子，其他的都不可以

例如如下的代码：

    <style>div > p {color:blueviolet;text-align:center;}</style><div><p>把我的明天都献给黑夜吧！</p><ul><p>把我的爱都献给你吧！！</p></ul></div>

运行的结果如下图所示：

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明

并集选择器是个选择器通过，隔开连接，任何形式的选择器都可以作为并集选择器的一部分

语法：

元素1，元素2，元素3{样式声明}

表示选择了元素1，元素2，元素3

（1）元素之间用逗号隔开

（2）逗号可以理解为和

并集选择器喜欢竖着写，最后一个选择器不加逗号

进行一个实例操作，代码如下：

    <style>p,a,h4 {color:blueviolet;text-align:center;text-decoration: none;}</style><a href="https://baike.baidu.com/item/%E5%AF%B9%E8%A7%92%E5%B7%B7%E4%B9%90%E9%98%9F/23659863?fr=aladdin" target="_blank"><h1>对角巷乐队</h1></a><p>6月12日，太合音乐集团旗下“在水星”厂牌服务艺人对角巷乐队全新单曲《我们》正式上线，这是他们继单曲《Hold You Tight》发行之后的又一温暖治愈系音乐作品。 如果说《Hold YouTight》想表达的是只属于某一个人的专属情歌，那这首《我们》则是送给每一个努力生活的人。</p><img src="2.jpeg" height="650" width="1000" title="对角巷新专辑"><h4> 一起去吧，更远的地方</h4>

运行结果如下图所示：

对角巷乐队标题本来是一个链接应该有下划线，但在样式声明中将其取消掉了

伪类选择器：

伪类选择器用于向某选择器添加特殊的效果

伪类书写的最大特点是用冒号（：）表示

链接伪类：

a:link	选择所有未被访问的
a:visited	选择已经被访问过的
a:hover	选择鼠标指上的
a:active	选择鼠标长按尚未弹起的

链接伪类注意事项：

（1）为了确保生效，请按照link，visited，hover，active顺序书写

记忆口诀：LV包包真hao

（2）因为a链接在浏览器中具有默认样式，实际工作中都需要给链接单独指定样式

实际开发的写法：

a {color:gray;
}
a:hover {color:skybule;
}

一个实例的代码如下所示：

    <style>a {color:gray;}a:hover {color:blueviolet;}</style><a href="对角巷.html" target="_balnk">在日月的璀璨间闪耀</a>

运行的结果如下图所示，当鼠标放在链接上时，颜色便会发生改变：

:focus伪类选择器

:focus伪类用于选择有光标的表单（input）元素

input:focus {

background-color:skybule;

}

复合选择器的总结：

选择器	作用	特征	使用情况	隔开及其用法
后代选择器	用来选择后代	可以是子孙	较多	符号空格
子代选择器	选择最近一级元素	只选择亲儿子	少	符号大于
并集选择器	选择样式相同的	用于集体	多	逗号
链接伪类	选择不同状态的链接	跟链接相关	多	正常写法
：focus	获取光标处	跟表单相关	少	input：focus

今天的主要介绍就是css的一些基础语法学习，更新的有些慢望大家理解，期末了要复习三门数学课了，暑假会持续性更新新知识哒！

CSS入门基础学习（上）相关推荐

java入门基础学习（三）
文章目录 (一)有返回值的方法 (二)方法重载习题 (一)有返回值的方法格式:public static 返回值数据类型方法名(参数){方法体return 数据;} 注意:1.返回值数据类型非v ...
python3.8学习_python3.8.1 入门基础学习之【字典】学习
python3.8.1 入门基础学习之 [字典] 学习字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整 ...
PS合成图片#ps抠图#ps视频教程入门基础学习课程小白
PS合成图片#ps抠图#ps视频教程入门基础学习课程小白
CSS入门基础-目录
CSS简介-CSS入门基础(001) CSS选择器-CSS入门基础(002) id选择器的使用-CSS入门基础(003) 子选择器的使用-CSS入门基础(004) 字体样式-CSS入门基础(005) ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
CSS入门基础详解——笔记、案例
CSS入门学习一.CSS简介 1.什么是css css:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记 ...
CSS入门基础（样式，css文件，选择器）
CSS入门学习 CSS的简介基本语法结构基本用法给元素添加样式行内样式内部样式外部样式定义样式css文件在html中引入css文档选择器标签选择类选择 id选择 CSS的简介层 ...
学起来 —— CSS 入门基础
Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一为"两个分离",二为语言遵循语义化, ...
音视频怎样入门？带你入门基础+学习思路
Android开发的路越走越难,难道真的没有其他出路了? 并没有,一个行业的下降趋势也会带起新的行业,他的本质不会变,技术会稍有改变,本篇我们就来说说音视频行业. 音视频行情分析 1.市场市场是一个 ...

CSS入门基础学习（上）

CSS入门基础学习（上）相关推荐

最新文章

热门文章