CSS基本语法

最新推荐文章于 2022-05-19 23:21:30 发布

YHRower

最新推荐文章于 2022-05-19 23:21:30 发布

阅读量274

点赞数

分类专栏： HTML与CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_46303258/article/details/106334070

版权

HTML与CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS

CSS语法规范:

<head>
<style>
选择器 {
	属性:值;
}
</style>
</head>

CSS基础选择器

//标签选择器
标签名 {
	属性1:属性值1;
	属性2:属性值2；
	属性3:属性值3；
	... 
}

//类选择器
.类名 {
	属性1:属性值1；
	属性2:属性值2；
	属性3:属性值3；
	... 
}
标签通过设置class属性来调用其类名，同时可多类名，例子：
.Rower {
	属性1:属性值1；
}
.rower {
	属性1:属性值1；
}
<div class="Rower rower"> Rower </div>

//id选择器
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义,id选择器在一个HTML里面只能被调用一次（规范）
#id名 {
	属性1:属性值1；
	属性2:属性值2；
	属性3:属性值3；
	... 
}
例子：
#Rower{
	属性1:属性值1；
}
<div id="Rower"> Rower </div>

//通配符选择器
通配符选择器使用"*"定义，表示选取页面中所有元素
* {
	属性1:属性值1；
	属性2:属性值2；
	属性3:属性值3；
	... 	
}
例子：
* {
	margin:0;
	padding:0;
}

CSS字体属性

//字体系列
标签 {
	font-family: "微软雅黑","Microsoft Yahei";
}

//字体大小
标签 {
	font-size: 20px;
}

//字体粗细
标签 {
	font-weight: 100-900;
	400为不加粗
	700为加粗
}

//字体样式
标签 {
	font-style: italic; 字体倾斜
	font-style: normal; 让倾斜字体变正常
}

//font复合属性
标签 {
	font: font-style font-weight fongt-size/line-height font-family;
	font: normal 700 20px/40px "微软雅黑"; font-size和font-family必须存在，且不能打乱顺序
}

CSS文本属性

//文本颜色
标签 {
	color: red;
	color: #ff0000;双击选中悬停
}

//文本对齐
标签 {
	text-align: center; 居中
	text-align: left; 左对齐
	text-align: right; 右对齐
}

//文本装饰
标签 {
	text-decoration: none; 没有装横线
	text-decoration: underline; 下划线
	text-decoration: overline; 上划线
	text-decoration: line-through; 删除线
}

//文本缩进
标签 {
	text-indent: 20px;
	text-indent: 2em; 相对单位 1em=font-sizep:px
}

//行间距
标签 {
	line-height: 26px;
}

CSS引入方式

//外部样式表
<head>
	<link rel="stylesheet" href="css表">
</head>

//内部样式表
<head>
<style>
选择器 {
	属性:值;
}
</style>
</head>

//行内样式表
<body>
	<p font...></p>
</body>

CSS复合选择器

//后代选择器
元素1 元素2 { 样式说明 } 
类名 元素 { 样式说明 }
元素1是父级，元素2是子级
例子：
ol li { color:red; }

//子选择器
元素1>元素2 { 样式说明 }
元素2必须是元素1的亲儿子
例子：
div>p { 样式说明 }

//并集选择器
元素1，
元素2 { 样式说明 }
以逗号隔开，规范是竖着写
例子：
div，
p { 样式说明 }

//链接伪类选择器
a:link { 样式选择 }选择所有未被访问的链接
a:visited { 样式选择 } 选择所有已被访问的链接
a:hover { 样式选择 } 选择鼠标指针位于其上的链接
a:active { 样式选择 } 选择活动链接(鼠标按下未弹起的链接)
要按顺序声明LVHA，平常一般只需要hover

//：focus伪类选择器
用于选取获得焦点的表单元素
例子：
input：focus { 样式选择 }

元素显示方式

HTML元素一般分为块元素和行内元素两种

//块元素
常见的块元素有<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等
特点：
（1）独占一行
（2）高度，宽度，外边距以及内边距都可以控制
（3）宽度默认容器的100%
（4）是个容器，里面可以放行内或块级元素
注意：
（1）文字类的元素不能使用块级元素

//行内元素
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等
特点：
（1）相邻行内元素在一行上，一行可以显示多个
（2）高、宽直接设置是无效的
（3）默认宽度就是它本身内容的宽度
（4）行内元素只能容纳文本或其他行内元素
注意：
链接里面不能放链接
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

//行内块元素
<img />,<input />,<td />,同时具有块元素和行内元素特点
特点：
（1）一行显示多个
（2）默认宽度就是本身宽度
（3）高度、宽度、外边距以及内边距都可以控制

//元素显示模式转换
转换为块元素 display：block；
例子：
/* a { display:block }*/
转换为行内元素 display：inline；
转换为行内块元素 display：inline-block；

CSS背景

//背景颜色
background-color:颜色; 默认transparent透明色

//背景图片
background-image:none|url(图片);

//背景平铺
background-repeat:repeat|no-repeat|repeat-x|repeat-y

//背景图片位置
background-position:x y;
方位名词：无顺序，center|top|right|left|bottom
精确单位：x、y有顺序，例子：20px 50px;
混合单位：x、y有顺序，例子：20px center：

//背景图片固定
background-attachment:scroll(滚动)|fixed(固定)

//背景复合写法
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

//背景色半透明
background:rgba(0,0,0,0.3)
a指的是alpha透明度，取值在0~1之间

CSS盒子模型

在这里插入图片描述

//盒子模型
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框、外边距、内边距和实际内容。
border 边框
content 内容
padding 内边距
margin 外边距

//边框border
border-width:边框粗细，px
border-style:边框样式
border-color:边框颜色
border:1px solid red;
border-top、border-bottom、border-right、border-left
border-collapse:表格细线边框合并,collapse

//内边距padding
padding-top、padding-bottom、padding-right、padding-left
padding:5px;上下左右5px
padding:5px 10px;上下5px。左右10px
padding:5px 10px 20px;上5px，左右10px，下20px
padding:5px 10px 20px 30px;上5px，右10px，下20px，左30px

//外边距margin
margin-top、margin-bottom、margin-right、margin-left
margin:5px;上下左右5px
margin:5px 10px;上下5px。左右10px
margin:5px 10px 20px;上5px，左右10px，下20px
margin:5px 10px 20px 30px;上5px，右10px，下20px，左30px
水平居中 margin:0 auto;
外边距合并 overflow:hidden;

圆角边框

border-radius:length;
例子
border-radius:10px;
border-radius:50%;
border-radius:10px 20px 30px 40px;左上开始顺时针
分开写
border-top-left-radius:10px;

盒子阴影

box-shadow:h-shadow v-shadow blur spread color inset;
例子：
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3);

文字阴影

text-shadow:h-shadow v-shadow blur color;

CSS浮动

//浮动
选择器 { float: 属性值; }
属性值:none/right/left;
例子:div { float:left ;}

//浮动特性
1.脱离标准普通流的控制移动到指定位置，俗称脱标；
2.浮动的盒子不再保留原先的位置；
3.浮动元素具有行内块元素特性；

常见网页布局

在这里插入图片描述

清除浮动

选择器 { clear: 属性值;}
属性值：left、right、both

//额外标签法
在父盒子的末尾空的子盒子并添加 clear:both;
注意必须用块级元素的子盒子

//父盒子添加overflow
属性值:hidden、auto、scroll;
例子： overflow:hidden;

//:after伪元素法
一样是给父盒子建立样式，添加.clearfix即可。
.clearfix:after {
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {
	*zoom:1;
}

//双伪元素清除浮动
一样是给父盒子建立样式，添加.clearfix即可。
.clearfix:before,.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	*zoom:1;
}

CSS定位

定位：将盒子定在某一个位置；
定位=定位模式+边偏移
position:属性值1；
属性2:px;
属性值1：
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
属性值2：
top、bottom、left、right

//定位叠放次序
选择器: z-index:1

CSS元素的显示与隐藏

//display
display:none; 隐藏元素
display:block; 除了转换为块级元素以外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置

//visibility 可见性
visibility:visible; 元素可视
visibility:hidden; 元素隐藏
visibility隐藏元素后，继续占有原来的位置

//overflow 溢出
overflow: visible; 不剪切内容也不添加滚动天
overflow: hidden; 不显示超过对象尺寸的内容，超出的部分隐藏掉
overflow: scroll; 不管超出内容否，总是显示滚动条
overflow: auto; 超出自动显示滚动条，不超出不显示滚动条

CSS精灵图

在这里插入图片描述

字体图标

//展示的是图标，本质属于字体
iconfont

//字体图标下载
推荐网站：
icomoon字库:http://icomoon.io
阿里iconfont字库:http://iconfont.cn/

CSS三角做法

.sanjiao {
	width: 0;
	height: 0;
	line-height: 0;
	font-size: 0;
	border: 20px solid transparent;
	border-left-color: red;
}

CSS用户界面样式

//鼠标样式cursor
cursor: 属性值;
属性值：
default 小白（默认）
pointer 小手
move 移动
text 文本
not-allowed 禁止

//取消表单轮廓
<input type="text" name="">
input
outline:none;

//防止拖拽文本域
textarea
resize: none;

CSS初始化

*{
	margin:0;padding:0
}
em,
i{
	font-style:normal
}
li{
	list-style:none
}
img{
	border:0;vertical-align:middle
}
button{
	cursor:pointer
}
a{
	color:#666;text-decoration:none
}
a:hover{
	color:#c81623
}
button,
input{
	font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
}
body{
	-webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}.hide,.none{display:none
}
.clearfix:after{
	visibility:hidden;clear:both;display:block;content:".";height:0
}
.clearfix{
*zoom:1
}

CSS其他知识点

//起始去掉默认外边距和内边距
* 
margin:0;
padding:0;

//去掉序列前图标
li list-style:none; 

//实现行内块与文字垂直居中对齐
vertical-align: 属性值;
属性值：
baseline 默认，元素放置在父元素的基线上
top 把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低的元素的顶端对齐

//溢出单文本省略号表示
1.先强制一行内显示文本
white-space: nowrap;
2.超出的部分隐藏
overflow: hidden;
3.文字用省略号替代超出的部分
text-overflow: ellipsis;

//溢出多文本省略号表示
overflow: hidden;
text-overflow: ellipsis;
1.弹性伸缩盒子模型显示
display: -webkit-box;
2.限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
3.设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;

YHRower

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS基本语法

CSSCSS语法规范:<style>选择器 { 属性: 值;}</style>CSS基础选择器基础选择器//标签选择器标签名 { 属性1：属性值1；属性2：属性值2；属性3：属性值3； ...}//类选择器.类名 { 属性1：属性值1；属性2：属性值2；属性3：属性值3； ...}标签通过设置class属性来调用其类名，例子：.Rower{ 属性1：属性值1；}<div class="Rower"> Row
复制链接

扫一扫

专栏目录