CSS总结笔记1

最新推荐文章于 2024-05-29 10:53:24 发布

m0_52058344

最新推荐文章于 2024-05-29 10:53:24 发布

阅读量69

点赞数 1

文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_52058344/article/details/119894610

版权

CSS总结

一.CSS的简介
二.CSS的语法规范
三.选择器
四.CSS的字体属性
五.CSS的文本属性
六.CSS的引入方式

一.CSS的简介

二.CSS的语法规范

三.选择器

四.CSS的字体属性

五.CSS的文本属性

六.CSS的引入方式

一.CSS的简介
1.CSS也是一种标记语言.
2.CSS的主要使用场景就是美化HTML，布局网页.
二.CSS的语法规范
1.CSS规则主要有两个主要部分构成：选择器和声明。
2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器{样式} */
        /* 选择器是用于指定css样式的HTML标签*/
    </style>
</head>
<body>
</body>
</html>

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

基础选择器:由单个选择器组成,包括:标签选择器,类选择器,id选择器,和通配符选择器.
复合选择器:基础选择器组成形成,包括:后代选择器,子选择器,并集选择器,伪类选择器

2.标签选择器总结

基础选择器	作用
标签选择器	可以选出所有相同的标签,但是不能差异化选择
类选择器	可以选出1个或多个标签
id选择器	一次只能选择1个标签
通配符选择器	选择所有的标签

3.(1)标签选择器语法:

标签名 {
         属性1: 属性值1;
         属性2: 属性值2;
         属性3:属性值3;
       }

(2)类选择器语法:

.类名 {                   
        属性1:属性值;
      }
class调用

(3)id选择器语法:

#id名 {
        属性1:属性值1;
      }
id调用

(4)通配符选择器语法:

*{
  属性1:属性值1;
 }

4.复合选择器的总结

复合选择器	作用
后代选择器	用来选取后代元素(可以是子孙后代)
子代选择器	选择最近一级元素(只选亲儿子)
并集选择器	选择某些相同样式的元素(可用于集体声明)
链接伪类选择器	选择不同状态的链接(跟链接相关)
:focus选择器	选择获得光标的表单(跟表单相关)

5.(1)后代选择器的语法:

元素1 元素2 {样式声明 }
//表示选择元素1里面的所有元素2
例如: ul li { 样式声明} /*选择ul里面所有的li标签元素*/
符号:空格

(2)子选择器的语法:

元素1>元素2 {样式声明}
//表示选择元素1里面的所有直接后代(子元素)元素2
符号:大于

(3)并集选择器的语法:

元素1,元素2 {样式声明}
//表示选择元素1和元素2
符号:逗号

(4)链接伪类选择器的语法:

   a:link /*选择未访问过的链接*/
    a:visited /*选择点击过的(访问过过的)的链接
    a:hover /*选择鼠标经过的那个链接*/
    a:active /* 选择的是我们鼠标正在按下还没有弹起的那个链接*/

四.CSS的字体属性

字体系列	font-family	字体间用逗号隔开
字体大小	font-size	px单位
字体样式	font-style	属性值为normal,italic
字体粗细	font-weight	normal=400,bold=700,数字后面不加单位
复合属性	font-style font-weight font-size font-family;	使用复合属性时,不要更换顺序,并且各个属性间用空格隔开; 不需要的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性不起作用

五.CSS的文本属性

文本颜色	color	说明
文本对齐	text-align	通常用十六进制表示
文本修饰	text-decoratioon	left,right,center,justify
文本缩进	text-indent	text-indent:2em(缩进2个字符),1个em=1个文字大小;
行高	line-height	行间距=上间距+文本高度+下间距

六.CSS的引入方式
1.按照CSS书写的位置,CSS样式表可以分为三大类:

行内样式表:在html内部写样式，但是写到style标签内部.
内部样式表:写到元素标签的内部，适用于简单的样式.
外部样式表:样式单独写到CSS文件中,之后把CSS文件引到HTML页面中使用.<link rel="stylesheet" href="style.css">

2.CSS引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	很多	控制一个页面
外部样式表	完全实现结构与样式分离	需要引入	最多	控制多个页面

m0_52058344

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS总结笔记1

CSS总结一.CSS的简介二.CSS的语法规范三.选择器四.CSS的字体属性五.CSS的文本属性六.CSS的引入方式一.CSS的简介二.CSS的语法规范三.选择器四.CSS的字体属性五.CSS的文本属性六.CSS的引入方式一.CSS的简介1.CSS也是一种标记语言.2.CSS的主要使用场景就是美化HTML，布局网页.二.CSS的语法规范1.CSS规则主要有两个主要部分构成：选择器和声明。2.<!DOCTYPE html><html lang="en">&
复制链接

扫一扫