CSS基础知识汇总{主要内容： CSS语法结构，类选择器，后代选择器，交集选择器等}

1、CSS的作用：通过css达到美化网页的效果
2、选择器：

✔ 基础选择器（重点）
◆标签选择器（重点学习）
◆类选择器（重点学习）
◆ID选择器
◆通配符选择器
✔ 复合选择器（重点）
◆后代选择器（重点）
◆子代选择器
◆伪类选择器（重点）
◆并集选择器（重点）
◆标签指定式选择器（重点）

类选择器示例：

类选择器特点注意事项：
◆不能使用数字定义类名
◆不能使用特殊字符定义类名（%，/…）
◆不推荐使用单个字母定义类名（不严谨）
◆不推荐使用汉字定义类名（不严谨）
◆ 推荐使用预定义好的类名
◆ 使用有具体语义的单词或者拼音定义类名

类选择器的特点：
◆一个类样式可以被多个标签同时调用
◆一个标签可以同时调用多个类选择器
☞ID选择器与类选择器之间的区别：
◆一般情况下，我们在使用ID选择器设置样式的时候，最好每一个标签的ID值不一样。
◆一个标签只能调用一个ID样式（一个标签只能有一个ID值）
通配符选择器
☞语法：
* { 属性: 值;… }
☞特点：
通过该选择器会将页面中所有的标签都选中。
3、与文本相关的属性介绍（不包括color）
font-size: 设置文字大小
☞ font-family: 设置文字字体
☞ font-weight: 设置文字是否加粗显示
◆normal 或者设置400 (默认值)
◆bold 或者设置 700 ---->文字加粗
☞ font-style: 设置文字是否斜体显示
◆normal (默认值)
◆italic ---->文字斜体显示
☞ line-height: 设置文字的行高
行高的本质是改变：文字上下之间的距离。
☞font属性联写：

☞注意：
◆在font属性联写中，必须设置font-size 和 font-family
◆在font属性联写中，font-size必须放到font-family之前设置
3、文本修饰
文字阴影

水平向右为正、垂直向下为正
注意：设置多个文字阴影使用逗号隔开即可。

4、设置内容居中显示：
text-align:left | center | right（也写在CSS样式中）
注意：
该属性只能在块级元素中使用。
5、后代选择器（掌握）
后代选择器必须在嵌套结构中使用，后代选择器只能选中所有后代元素（子元素）

语法：选择器  选择器 {属性: 值;.....}
注意：后代选择器中，选择器与选择器之间必须有空格！！！

6、子代选择器

语法：选择器>选择器 {属性: 值;....}
特点：◆只能在嵌套结构中使用子代选择器◆子代选择器只能选中直接子元素（只能选中儿子）

7、标签指定式选择器（掌握）

标签指定式选择器又叫 交集选择器
语法：选择器.选择器{ 属性: 值;.... }
标签指定式选择器的关系：既。。。。又。。。。
如：div.one{属性: 值;.... }

8、并集选择器

语法：选择器,选择器 {属性: 值;....}
通过并集选择器设置公共的样式

CSS基础知识汇总{主要内容： CSS语法结构，类选择器，后代选择器，交集选择器等}相关推荐

关于前端的HTML+CSS基础知识汇总（较为全面）
这里写目录标题初识空元素的两种写法元素之间的嵌套标准的文档结构(告诉浏览器当前使用的 HTML 标准是 html5.) 语义化什么是语义化? 为什么需要语义化? 文本元素 h p span( ...
前端html+css基础知识汇总（个人学习内容总结，希望对你有帮助内含部分代码）
*小知识点 0.定位和浮动做布局,移动transform做效果例如;京东盒子上升效果快捷键:ctrl+f 快速查找 ctrl+g 快速跳转行号 1.text-aline:center可以让什么元素 ...
Html与CSS基础知识篇（HTML标签语法篇）
HTML和CSS的关系学习Web前端开发基础技术需要掌握:Html.CSS.JavaScript语言.下面我们大致了解一下这三门技术都用来实现什么: (1)HTML是网页内容的载体.内容就是网页制作 ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
HTML+CSS基础知识简单版
HTML+CSS基础知识简单版一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
CSS基础知识（定位）
CSS基础知识 CSS布局的三种机制普通流(标准流) 浮动定位定位模式静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 边偏移定位 ...
CSS基础知识（高级技术）
CSS基础知识元素的显示与隐藏 display 显示 visibility 可见性 overflow 溢出 CSS用户界面样式鼠标样式cursor 轮廓线 outline 防止拖拽文本域resiz ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...

CSS基础知识汇总{主要内容： CSS语法结构，类选择器，后代选择器，交集选择器等}

CSS基础知识汇总{主要内容： CSS语法结构，类选择器，后代选择器，交集选择器等}相关推荐

最新文章

热门文章