CSS基本语法

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;
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值