02-CSS基础知识梳理(I)

I.类选择器的使用

<style>.box {width: 100px;height: 100px;}.red {/* 背景颜色 */background-color: red;}.green {/* 背景颜色 */background-color: green;}
</style><body><!-- div本身就是一个容器 --><div class="red box">红色</div><div class="green box">绿色</div><div class="red box">红色</div>
</body>

1.样式点定义结构类调用一个或多个开发最常用
2.在没有类选择器的情况下，一般选择器（标签选择器）会直接使用HTML标签当做选择器来定义CSS样式内容，不能实现差异化选择。
3.选择器里面的样式必须用小写字母来进行书写。
4.在HTML内容之中，HTML会利用 <标签 class=“调用对象”>来生成对应内容，而类选择器会选取相应的调用对象，并在前面加上.符号，来实现类选择器的调用和定义。
5.<标签 class=“调用对象”>内部可以存在多个调用对象，这种现象称之为“多类名调用对象”，多个调用对象之间用空格来隔开，诸如<标签 class=“调用对象1 调用对象2 调用对象3”>
6.样式定义的方法为属性:属性值，切记赋值符号为:而非=

II.ID选择器以及通配符选择器

  <!-- id选择器可以为标有特定ID的HTML元素指定特定的样式 --><!-- HTML元素以id属性来设置id选择器 --><style>/* ID选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用！ */#pink {color: pink;}</style>
</head><body><div id="pink">长门有希</div><div>凉宫春日</div>
</body>

1.在CSS样式表里面为调用对象添加#,在HTML内容里面添加对应的id选择器即可

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 通配符选择器，选取页面中所有的元素，定义具体的样式 --><style>* {margin: 0;padding: 0;}</style>
</head><body></body></html>

1.注意通配符选择器的优先级是最低的

III.CSS文本系列
III.I.CSS字体属性

  <style>.bold {font-weight: 700;}/* 完全可以直接写对应的body，不仅仅是引用类 */body {/* 各种字体之间应该用逗号隔开 *//* 由空格隔开的多个单词组成的字体，加引号 *//* 找对应的字体，依次寻找存在的字体 */font-family: Arial, 'Microsoft YaHei'，'Times New Roman';font-size: 16px;font-weight: lighter;font-style: normal;}/* 标题是特殊的，需要单独指定文字大小,在boby已定义的情况下，下面再定义一个即可,上面定义的样式会被覆盖（对应覆盖式） */h2 {font-size: 16px;}div {/* font: font-style font-weight font-size font-family; */font: italic 700 16px 'Microsoft YaHei';/* color: pink; */color: #00ff40;color: rgb(244, 0, 255);}</style>
</head><body><!-- 可以直接给body定义字体 --><!-- 标题是特殊的，需要单独指定文字大小 --><h2>font-family</h2><p>凉宫春日的忧郁</p><p>凉宫春日的叹息</p><p class="bold">凉宫春日的惊愕</p><p><em>凉宫春日的分裂</em></p><div>三生三世，不如有你</div>
</body>

1.font-family:“字体样式”
2.font-size:“字体尺寸”
3.font-weight:“字体粗细”
4.font-style:“字体形态”
5.可以在CSS样式表中单独为标签设置对应的字体属性
6.字体复合属性可以同时设置多个字体属性，字体属性之间用空格隔开，拥有严格的顺序，并且font-size和font-family不能省略，顺序见下：
font:字体形态字体粗细字体尺寸字体样式
7.字体颜色可以直接输入相关英语单词，也可以利用#000000来定义颜色属性值，或者利用rgb(0,0,0)来定义颜色属性值

III.II.CSS文本外观

<style>h1 {/* 本质是让h1格式的文字水平居中对齐，此为文本对齐属性 */text-align: left;}.pink {/* 下划线 */text-decoration: underline;}/* 删除线 */.dele {text-decoration: line-through;}/* 上划线 */.use {text-decoration: overline;}a {/* 取消a默认的下划线 */text-decoration: none;}</style></head>
<body><h1>我永远喜欢凉宫春日</h1><div class="pink">我永远喜欢凉宫春日</div><div class="dele">谁是爷爷呀？</div><div class="use">我是爷爷呀！</div><a href="http://www.baidu.com" target="_blank">百度</a>
</body>

1.text-align 文本对齐属性，对应的值有left,center,right;
2.text-decoration 文本线型属性，对应的值有underline(下划线),line-through(删除线),overline(上划线),none(取消线型属性，常用于a标签)

III.III.CSS文本段落属性

    <style>p {/* 文本的缩进用text-indent:xxem; *//* em是一个相对单位，对应的参考值就是当前元素一个文字的大小 */text-indent: 2em;}div {/* 行与行之间的距离用line-height属性，用于设置行间的距离，控制行与行的距离 *//* 行高是由上边距和下边距经过平均分配后决定的（还包括了文字的总高度） */line-height: 16px;}</style>
</head><body><p>我永远喜欢凉宫春日！</p><p>我永远喜欢朝仓凉子！</p><div>我永远喜欢长门有希</div><div>我永远喜欢鹤屋学姐</div>
</body>

1.一般可以在文本标签内部定义相关的文字段落属性
2.text-indent为缩进属性，相关单位为em,1em=1个文字的大小
3.line-height定义了行与行之间的距离，其单位为px，而行高本身是由上下边距经过平均分配决定的，行高的组成包括三大要素：文字本身的高度，上边距，下边距。

IV.CSS引入方式
1.其引入方式为三大样式表，内部样式表（和HTML内容一起写在一个HTML页面之中），行内样式表（卸载HTML内容的标签内部，很少使用），外部样式表（在头部标签内部，通过引入外部的样式表）

02-CSS基础知识梳理(I)相关推荐

javaweb(02) JavaScript基础知识
javaweb(02): JavaScript基础知识 JavaScript简介为什么出现JavaScript Javascript是什么 JavaScript和Java的关系? 就像卡巴斯基和巴基 ...
CSS 基本知识梳理-续
CSS 基本知识 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网 ...
深入浅出Pytorch：02 PyTorch基础知识
深入浅出Pytorch 02 PyTorch基础知识内容属性:深度学习(实践)专题航路开辟者:李嘉骐.牛志康.刘洋.陈安东领航员:叶志雄航海士:李嘉骐.牛志康.刘洋.陈安东开源内容:http ...
Python基础知识梳理（一）
Python基础知识梳理: 转载于:https://blog.51cto.com/10412806/2095116
C#基础知识梳理系列十：异常处理 System.Exception
C#基础知识梳理系列十:异常处理 System.Exception 参考文章: (1)C#基础知识梳理系列十:异常处理 System.Exception (2)https://www.cnblogs. ...
python语法基础知识总结-Python基础知识梳理 - 第01部分
在开始Python基础知识梳理前, 先安装下环境. 以下过程是在Linux操作系统, root用户下进行的, 主要安装了2.7版本的python, 和pip, ipython, virtualenv等 ...
[SQL] SQL 基础知识梳理（三） - 聚合和排序
SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序这是<SQL 基础知识梳理 ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
python入门题目及答案_Python基础自测题答案和基础知识梳理
Python基础自测题答案和基础知识梳理 1.关于Python中的lambda表达式的函数体自能是单独一条语句,所以答案选择C. 例如:>>>g = lambda x: 2*x+1 ...
mysql 算子谓词_[SQL] SQL 基础知识梳理（六）- 函数、谓词、CASE 表达式
SQL 基础知识梳理(六)- 函数.谓词.CASE 表达式目录函数谓词 CASE 表达式一.函数 1.函数:输入某一值得到相应输出结果的功能,输入值称为"参数",输出值称 ...

02-CSS基础知识梳理(I)

02-CSS基础知识梳理(I)相关推荐

最新文章

热门文章