CSS小结

最新推荐文章于 2022-06-11 14:18:39 发布

weixin_43371898

最新推荐文章于 2022-06-11 14:18:39 发布

阅读量83

点赞数

本文链接：https://blog.csdn.net/weixin_43371898/article/details/117163533

版权

HTML是一种语言；CSS也是一种语言。如果想要CSS能够修饰HTML的样式，就必须把CSS引入到HTML中。即：要解决把CSS代码写在什么地方的问题
引入的方式有：
- 内联样式：把CSS代码内嵌到HTML代码里,通过标签的style属性来结合
- 内部样式：把CSS代码写在HTML文档内部,通过style标签来结合
- 外部样式：把CSS代码写在独立的CSS文件里,通过link标签结合

3. 讲解

3.1通过标签的style属性来结合【了解】

<!--通过style属性-->
<p style="属性名称:属性值;..."></p>

3.2通过style标签来结合【掌握】

<head>
	<style type="text/css">
        标签名称{
            属性名称: 属性对应的值;
           	
        }
	</style>
</head>

注意点:
	1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
	2.style标签中的type属性其实可以不用写, 默认就是type="text/css"
	3.设置样式时必须按照固定的格式来设置. key: value; 其中:不能省略, 分号大多数情况下也不能省略

3.3通过link标签结合【掌握】

创建一个css文件(后缀是css)
通过link标签引入

<head>
	<link rel="stylesheet" href="../../css/myCss.css" />
</head>

link标签属性:
	- href:css文件路径

3.4 三种结合方式优先级

就近原则(相对于代码,也就是要修饰的标签)

4. 小结

通过标签的style属性

<标签 style="css代码"></标签>

通过style标签

<style>
	css代码
</style>

通过link标签
- 把css单独定义一个文件
- 通过link标签引入

知识点-CSS基本选择器

1. 目标

能够使用CSS的基本选择器，选择要修饰的HTML标签

2. 分析

选择器：用于选择HTML元素(标签)，进行样式修饰。
常用的选择器有
1. 标签选择器
2. ID选择器
3. 类选择器

3. 讲解

3.1基本选择器语法

选择器	描述	语法	示例
标签选择器	根据HTML标签名称选择标签	`标签名称{}`	`div{ color:red; }`
ID选择器	根据id属性值选择标签	`#id值{}`	`#d1 { color:blue; }`
类选择器	根据class属性值（类名）选择标签	`.类名{}`	`.c1 { color:yellow; }`
通用选择器	选取所有标签	`*{}`	`*{ color: pink;}`

3.2 优先级

选择器优先级

ID选择器 > 类选择器 > 标签选择器 > 通用选择器
如果优先级相同，那么就满足就近原则

4. 小结

标签选择器只要是当前这个标签的都会修饰到

标签名{}

id选择器适合找1个

#id{}

class选择器适合找多个(>=1)

.class{}

知识点-CSS扩展选择器

1. 目标

能够使用CSS的扩展选择器，选择要修饰的HTML标签

2. 分析

CSS还提供了更多更加灵活的选择器
- 使用多个基本选择器进行组合，可以更灵活的选取标签
- 使用伪类选择器，添加一些特殊效果

3. 讲解

3.1 组合选择器

多个基本选择器的组合，可以更灵活的选取标签

选择器	描述	语法	示例
层级选择器	根据HTML标签名称选择标签	`祖先后代`	`div a{ }`
属性选择器	根据指定属性的值筛选元素	`[属性='值']`	`input[type='text'] { }`
并集选择器	多个选择器的结果进行合并	`选择器1,选择器2,...`	`.c1, span { }`

3.2 伪类选择器【了解】

了解几个超链接相关的伪类选择器

选择器	描述	示例
`:link`	选择正常状态的超链接	`a:link{}`
`:visited`	选择被访问过的超链接	`a:visited{}`
`:hover`	选择鼠标悬停的超链接	`a:hover{}`
`:active`	选择鼠标按下的超链接	`a:active{}`

4. 小结

知识点-CSS常用属性

1. 目标

能够使用CSS常用属性，修饰HTML标签的样式

2. 分析

CSS提供了大量的样式用于修饰HTML标签，我们需要了解的有：
1. 背景属性
2. 文本样式
3. 字体属性

3. 讲解

3.1 背景属性

介绍

功能	属性名	属性取值
背景色	`background-color`	1. 颜色常量，如：red 2. 使用十六进制，如：#ABC 3. 红绿蓝使用 rgb(红,绿,蓝)
背景图片	`background-image`	`url(图片的路径)`
平铺方式	`background-repeat`	`repeat` 默认。背景图像将在垂直方向和水平方向重复 `repeat-x` 背景图像将在水平方向重复。 `repeat-y` 背景图像将在垂直方向重复。 `no-repeat`背景图像将仅显示一次。
背景位置	`background-position`	left top

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性-背景</title>
    <style>
        /*设置整个页面的背景样式*/
        body{
            /*背景图片*/
            background-image: url("img/little_mm.jpg");
            /*平铺方式*/
            background-repeat: repeat;
        }
    </style>
</head>
<body>

    <div>页面内容</div>

</body>
</html>

3.2 文本样式

3.2.1 介绍

功能	属性名	属性取值
颜色	`color`	颜色
设置行高	`line-height`	像素
文字修饰	`text-decoration`	`underline` 下划线 `overline` 上划线 `ine-through` 删除线 `none` 不要线条
文本缩进	`text-indent`	用于缩进文本，可以使用em单位。
文本对齐	`text-align`	`left` 把文本排列到左边。 `right` 把文本排列到右边。 `center` 把文本排列到中间。默认值：由浏览器决定。

3.2.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性-文本</title>
    <style>
        p{
            /*首行缩进：2个字符*/
            text-indent: 2em;
            /*文字颜色：绿色*/
            color: green;
        }
        a{
            /*超链接 不显示下划线*/
            text-decoration: none;
        }
    </style>
</head>
<body>

<p>
    "中关村黑马程序员训练营"是由<a href="http://www.itcast.cn">传智播客</a>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
</p>
<p>
    目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
</p>

</body>
</html>

3.3 字体属性

3.3.1 介绍

功能	属性名	作用
字体名	`font-family`	设置字体，本机必须要有这种字体
设置大小	`font-size`	像素
设置样式	`font-style`	`italic` 斜体 `normal` 默认值。浏览器显示一个标准的字体样式。
设置粗细	`font-weight`	`bolder`加粗

3.3.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性-字体</title>
    <style>
        span{
            /*字体：幼圆*/
            font-family: 幼圆;
            /*大小：40px*/
            font-size: 40px;
            /*字体：斜体*/
            font-style: italic;
            /*加粗显示*/
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <span>黑马程序员</span>
</body>
</html>

weixin_43371898

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS小结

HTML是一种语言；CSS也是一种语言。如果想要CSS能够修饰HTML的样式，就必须把CSS引入到HTML中。即：要解决把CSS代码写在什么地方的问题引入的方式有：内联样式：把CSS代码内嵌到HTML代码里,通过标签的style属性来结合内部样式：把CSS代码写在HTML文档内部,通过style标签来结合外部样式：把CSS代码写在独立的CSS文件里,通过link标签结合3. 讲解3.1通过标签的style属性来结合【了解】<p .
复制链接

扫一扫