目录
前言
对于初学者需要掌握的css的基本相关语法知识
提示:以下是本篇文章正文内容,下面案例可供参考
一、css是什么?
在学习css是什么之前,我们先来了解下HTML?
HTML是超文本标记语言,主要用于做结构呈现,用于显示元素的内容!ok,下面我们来介绍css
css是标记语言,用于美化html网页、布局页面!css最大价值,由html专注做结构呈现,样式则有css实现,也就是结构与样式相分离
二、css组成
css是由选择器和一个或者多个声明来组成的
三、css基本属性
1.css引入
1.内部样式表,指的是写在在html页面里,单独放到style标签内部,优点是结构与样式部分分离
<style>
p {
color: red;
font-size: 12px;
}
</style>
2.行内样式表,直接在标签中添加css属性。适用于修改样式少的情况下使用
<p style="color:red;font-size:12px;">
3.外部样式表,把css文件单独创建,使用link引入
代码如下(示例)
<link rel="stylesheet" href="css/外部样式表.css">
2.css基本属性
1.css字体属性
代码如下(示例):
font-family: Microsoft YaHei 用于设置字体
font-size: 12px 用于设置字体大小!注:谷歌浏览器默认是16px;
font-weight: 400/700 用于设置字体的粗细,400/700等价于normal/bold
font-style: italic(倾斜) normal(正常) 工作中常用于把倾斜的字体设置成正常
字体属性的复合写法:
font: font-style font-weight font-size/line-height font-family
注意:
- 复合写法,中间以空格相隔;并且顺序不能颠倒
- 不需要的可以省略,但是必须要有font-size 和 font-family 属性
2.css文本属性
代码如下(示例):
color: red;设置文本字体颜色
text-align: center/left/right 只能用于设置文本对齐(只是让盒子里的内容居中对齐)
text-decoration: none(删除下划线)/underline(下划线)/overline(上划线)/line-through(删除线)
text-indent: 2em 用于文本首行缩进,em是相对单位,默认浏览器是一个字体是16px,1em=16px
line- height: 25px;用于设置行高,行高=文字本身的高度+上边距+下边距
3.css选择器
首先我们要知道css选择器,分为基本选择器和复合选择器
1.基本选择器
代码如下(示例):
标签选择器 : p 选择所有的<p> 标签
类选择器:.star 选择所有类名 class="star" 的元素
id选择器:#id 选择所有id名 id="first" 的元素
通配符选择器 * 选择所有的元素
2.复合选择器
定义:复合选择器是在基础选择器之上,对基本选择器进行组合形成的
优点:复合选择器可以更准确、高效的选中想要的元素
常用复合选择器:后代选择器、子代选择器、并集选择器、伪类选择器
<div class="father">
<span>你好,html</p>
<span>你好,css</p>
<div class="son">
<span>你好程序员</span>
<p>你好,JavaScript</p>
</div>
</div>
<h2> 写代码是一件很有意思的事情 </h2>
1.后代选择器:顾名思义,可以选择某个元素的后代元素! 代码如下(示例):
.father span { color: red; }
以上使用后代选择器,选中了div元素下面的 3 个 span 标签,字体颜色均设置为 红色
2.子代选择器:只对父元素下面的直接子元素起作用,使用 > 分割 代码如下(示例):
.son>p { color: pink; }
以上使用子代选择器,选中 div元素下面的 直接子元素p标签,字体颜色设置为粉色
3.并集选择器:可以同时选择多个标签,设置相同的样式。通常用于集体声明!使用英文 "," 分隔! 代码如下(示例):
.son>p,
h2{ font-size: 12px; }
以上使用并集选择器,选中 .son元素下面的 p 标签,同时也选中了 h2 标签,设置了相同的属性。优点是可以简化代码
4.伪类选择器:用于给选择器添加某种效果而存在的,比如给链接添加特殊效果,或者选择第1个,第n个元素
伪类选择器最大的特点是用 : 来示,如 :hover ,:first-child
伪类选择器有很多,比如有链接伪类、结构伪类等
1)链接伪类如下:
a:link 指的是选择未点击过的链接选出来
a:visited 指的是选择已经被点击过的链接
a:hover 指的是鼠标经过的链接 最常用
a:active 指的是鼠标按下不松开时的链接
注:1.为了确保生效,必须按照LVHA顺序来写
2.a链接在浏览器中有默认的样式,所以实际工作中要单独给链接指定样式
2) :focus伪类选择器主要用来选择获取光标的表单元素
总结
以上是今天分享的关于css的一些基本语法,主要涉及css的引入方式、css的基本属性,比如文本属性、字体属性等。
另外也为大家简单介绍了下css的选择器:基本选择器和复杂选择器。当然这些都是大家在写css的过程中基本都会使用到的,后期也会为大家补充更多相关的内容。
第一次分享之前的笔记,可能表述或者格式内容不好,还请大家见谅,谢谢!