首页 前端知识 CSS3基本语法

CSS3基本语法

2024-06-30 22:06:51 前端知识 前端哥 1002 613 我要收藏

文章目录

      • 一、CSS引入方式
      • 二、选择器
        • 1、标签选择器
        • 2、类选择器
        • 3、id选择器
        • 4、通配符选择器
      • 三、字体操作
        • 1、字体大小
        • 2、字体粗细
        • 3、字体样式(是否倾斜)
        • 4、字体修改
          • 常见字体系列
        • 修改字体系列语法
      • 四、文本操作
        • 1、文本缩进
        • 2、文本水平对齐方式
        • 3、文本修饰
        • 4、文本水平居中总结**text-align: center;**
        • 5、文本水平居中方法margin
      • 五、行高
          • font连写
      • 六、颜色常见取值
      • 七、选择器进阶
        • 1、后代选择器
        • 2、子代选择器
        • 3、并集选择器
        • 4、交集选择器
      • 八、简写语法(emmet语法)
      • 九、hover伪类选择器
      • 十、背景相关
        • 背景属性的连写
      • 十一、元素显示模式
        • 1、块级元素
        • 2、行内块元素
        • 3、元素显示模式转化
      • 拓展、HTML嵌套规范

一、CSS引入方式

  • 内嵌式
    s t y l e style style放在 h e a d head head
  • 外联式
    类似分文件编写,需要使用 l i n k link link语法引用 . c s s .css .css文件
<link rel="stylesheet" href="xxx.css">
  • 行内式
    不推荐

二、选择器

1、标签选择器
<style>
	p { //p为段标签
	}
</style>
2、类选择器
<style>
	.box {  //定义的类名
	}
</style>
<body>
	<div class="box"></div>
</body>
3、id选择器

一般与js搭配使用

<style>
	.one {  //定义的id
	}
</style>
<body>
	<div id="one"></div>
</body>
4、通配符选择器

找到所有的标签

<style>
	* {  
	}
</style>
<body>
	<div></div>
	<p></p>
</body>

三、字体操作

1、字体大小
<style>
	.box {
		font-size: 30px;  //px是像素
	}
</style>
2、字体粗细

常用:

  • 普通 normal
  • 加粗 bold
<style>
	font-weight: bold;
</style>
3、字体样式(是否倾斜)
  • 普通 normal
  • 倾斜 italic
<style>
	font-style: italic;
</style>
4、字体修改
常见字体系列
  • sans-serif 无衬线字体
  • serif 衬线字体
  • monospace 等宽字体
修改字体系列语法
<style>
	font-family: 宋体,隶书,sans-serif
</style>
  • 渲染规则:
    (1)从左往右按顺序查找,找到第一个电脑有的字体使用
    (2)如果都不支持,则按最后的字体系列默认值使用
  • 注意
    如果字体名称中存在多个单词,推荐使用引号包裹。

四、文本操作

1、文本缩进
<style>
	.box {
		text-indent: 5px;  //缩进5像素
		text-indent: 2em;	//缩进两字符
	}
</style>

em指font-size大小

2、文本水平对齐方式
<style>
	.box {
		text-align: center;
	}
</style>
  • 注意:
    若需要给文本水平居中,text-align需要给文本的父元素设置。
3、文本修饰
<style>
	.box {
		text-decoration: underline;
	}
</style>
  • underline 下划线
  • line-through 删除线
  • overline 上划线
  • none 无装饰线
    注意:
    开发中会使用text-decoration: none;清除a标签默认的下划线
4、文本水平居中总结text-align: center;
  • 能让哪些元素水平居中:
    (1)文本
    (2)span标签、a标签
    (3)input标签、img标签
  • 注意:
    如果需要让以上元素水平居中,需要给以上元素的父元素设置
5、文本水平居中方法margin
  • 是将div、p、h(大盒子)水平居中的方法
margin: 0 auto;
  • 注意:
    (1)想让谁水平居中,就给谁里面设置
    (2)margin:0 auto一般针对于有固定宽度的盒子,大盒子没有设置固定宽度,此时会默认占满父元素的宽度。

五、行高

  • 控制行间距
<style>
	.box {
		line-height: 5px; 
		line-height: 2;	2倍字符间距
	}
</style>
  • 注意
    (1)使用line-height:文字父元素高度,可以使得单行文本垂直居中。
    (2)line-height:1;可以消除上下间距
font连写
<style>
	.box{
		font:style weight size/line-height family;
	}
</style>

六、颜色常见取值

  • 关键词
  • rbg表示法:
    红绿蓝三原色,每一项取值范围0~255
  • rbga表示法:
    红绿蓝三原色+a表示透明度,取值范围0~1
  • 十六进制表示法

七、选择器进阶

1、后代选择器
  • 语法
    选择器1 选择器2{CSS}
  • 结果:
    在选择器1找到的标签的儿子、孙子……中,找到所有满足选择器2的标签
2、子代选择器
  • 语法
    选择器1>选择器2{CSS}
  • 结果
    在选择器1所找到的标签的子代中,找到满足选择器2的标签
3、并集选择器
  • 语法
    选择器1,选择器2{CSS}
  • 结果
    找到同时满足任意一个选择器的元素
4、交集选择器
  • 语法
    选择器1选择器2{CSS}
  • 结果
    找到同时满足两个选择器的元素

八、简写语法(emmet语法)

在这里插入图片描述

九、hover伪类选择器

  • 选中鼠标悬停在元素上的状态,设置样式
  • 语法
    选择器 : hover{CSS}

十、背景相关

  • background-color 背景颜色
  • background-image 背景图片
  • background-repeat 背景平铺
    (1)repeat x,y方向都平铺
    (2)no-repeat 不平铺
    (3)repeat-x 沿着水平方向平铺
    (4)repeat-y 沿着垂直方向平铺
  • background-position 背景位置
    可使用方位名词或者数字+px
背景属性的连写
background: clor image repeat position

十一、元素显示模式

1、块级元素
  • 属性:
    display:block
  • 显示特点:
    (1)独占一行
    (2)宽度是父元素的宽度,高度由内容撑开
    (3)可以设置宽高
2、行内块元素
  • 属性:
    display:inline-block
  • 显示特点:
    (1)一行可显示多个
    (2)可以设置宽高
3、元素显示模式转化

在这里插入图片描述

拓展、HTML嵌套规范

块级元素基本可以任意嵌套元素,但是:
特殊的,p标签中不可以嵌套块级元素

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13709.html
标签
评论
发布的文章

在echarts中使用geojson地图

2024-07-29 00:07:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!