标签:line 文本 赋值 bre tle 前端入门 ddl 内容 操作
目录
1.在标签头部的style
2.属性值是css语法
3.属性值用Key:value形式赋值,value具有单位
4.属性值之间用;隔开
<div style=‘width:100px;height=100px;backgroud-color:red;‘>
</div>
1.在style标签内部(style标签一般作为(head的子标签))
2.属性值是css语法
3.属性值用Key:value形式赋值,value具有单位
4.属性值之间用;隔开(一般独立分开赋值)
5.格式:选择器{样式块}
<style type=‘text/css‘>
div{
width:100px;
height:100px;
backgroud-color:red;
}
</style>
1.在外部CSS文件中
2.属性值是css语法
3.属性值用Key:value形式赋值,value具有单位
4.属性值之间用;隔开(一般独立分开赋值)
5.格式:选择器{样式块}
6.将html和css文件建立连接:通过link标签链接外部CSS
?
<link rel=‘stylesheet‘ type=‘text/css‘ href=‘css/01.css‘>
01.css
div{
width:100px;
height:100px;
backgroud-color:red;
}
注:三种方式之间没有优先级之分
1.三种方式协同布局,从上往下解析
2.不重复的属性一定为唯一位置
3.重复的属性采用覆盖赋值,保留最后位置的属性值
4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
5.!important会影响优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type=‘text/css‘>
div{
width:100px;
height: 100px;
background-color: yellow;
}
</style>
<link rel="stylesheet" type="text/css" href="02.css">
</head>
<body>
<div style=‘background-color: yellowgreen‘></div>
</body>
</html>
02.css
div{
width:100px;
height: 100px;
background-color: red;
}
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
font-family:‘STHeiti‘,‘微软雅黑‘;
left 居左 | center 居中 | right 居右
underline 下划线 | line-throught 中划线 | overline 上划线 |none
normal:默认换行规则
break-all:允许在单词内换行
baseline:将支持valign特性的对象的内容与基线对齐
sub:垂直对齐文本的下标
super:垂直对齐文本的上标
top:将支持valign特性的对象的内容与对象顶端对齐
text-top:将支持valign特性的对象的文本与对象顶端对齐
middle:将支持valign特性的对象的内容与对象中部对齐
bottom:将支持valign特性的对象的文本与对象底端对齐
text-bottom:将支持valign特性的对象的文本与对象底端对齐
background-image: url(‘bg_repeat.gif‘);
repeat:默认。背景图像将在垂直方向和水平方向重复。
repeat-x:背景图像将在水平方向重复。
repeat-y:背景图像将在垂直方向重复。
no-repeat:背景图像将仅显示一次。
定位值可为方位词:如果只设置了一个值,第二个默认为center
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
固定值:第一个值控制水平位置,第二个值控制垂直位置。左上角是 0 0。如果只设置了一个值,另一个值将是50%
百分比:第一个值控制水平位置,第二个值控制垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您只设置规定了一个值,另一个值将是 50%。
scroll:默认值。背景图像会随着页面其余部分的滚动而移动。
fixed:当页面的其余部分滚动时,背景图像不会移动。
*{
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
}
.dd{
font-size: 50px
}
#ele{
color: blue;
}
未完待续
未完待续
未完待续
DAY44-前端入门-css的三种引用方式以及优先级、样式与长度颜色、常用样式、css选择器
标签:line 文本 赋值 bre tle 前端入门 ddl 内容 操作
原文地址:https://www.cnblogs.com/xvchengqi/p/9682662.html