文章目录
2.CSS
2.1 语法
CSS规则由两部分组成：选择器、以及一/多条声明
注释：/*这是一条CSS注释*/
2.2 三种方式+四种选择
2.2.1 三种方式
- 内联样式：HTML元素中使用"style"属性
<body style="background-color:yellow;background-image:url("/images/backsmile.gif")"><--!背景颜色-->
<h1 style="text-aline:center;">居中对齐的标题</h1><--!文本对其方式-->
<p style="font-family:arial;color:red;fontsize:20px">这是一个段落</p><--!字体、字体颜色、字体大小-->
</body>
- 内部样式表：中使用
<head>
<style type="text/css">
body{
background-color:yellow;}
p{
color:blue;}
</style>
</head>
- 外部样式表：(样式使用在许多页面时)
<link href="mystyle.css" rel="stylesheet" type="text/css">
2.2.2 四种选择
- CSS选择器：指定CSS要作用的标签，标签名就是选择器
- 一个标签可以被多个css选择器选择
- 标签，id，类{ }
- 标签选择器：选择器的名字是HTML页面的所有这种类型的标签(共性)
- 多个标签可以使用同一标签选择器
- 类上样式，id上行为(class属性供css使用，id属性供js使用)
<style type="text/css">
h1,p{
font-size:14px;
}
</style>
<body>
<h1>这是一个标签选择器</h1>
<p>css1</p>
<p>css2</p>
</body>
- ID选择器："#id名{ }",修饰的是某一特定标签
<head>
<style>
#css1{
border:3px font-size:14px;
}
</style>
</head>
<body>
<p id="css1">css1</p>
<p id="css2">css2</p>
</body>
- 类选择器：".类名{ }"，描述一组元素的样式(可以指定特定元素使用class)，一个标签可以有多个类(空格隔开，每个类应尽可能的小，有“公共”概念，供多个标签使用)
<style>
p.cl1{
color:blue;
}
.cl2{
font-size:30px;}
.cl3{
text-decoration:underline;}
</style>
<body>
<h1 class="cl1">这是一个不受影响的标题</h1>
<p class="cl1 cl2">段落1</p>
<p class="cl1 cl3">段落2</p>
<p class="cl2 cl3">段落3</p>
</body>
- 伪类选择器
-
标签的4种状态：
link–链接点击之前
hover–鼠标放在标签上
active–点击标签没有松开鼠标
visited–点击之后
focus–某个标签获得焦点的时候(eg：点击某个文本框后输入文字，定义文本框和文字的属性)
-
静态伪类&动态伪类
- 静态伪类：link、visited(只能用于超链接、a{}所有超链接包括锚点/a:link{}所有写了href的超链接，不包括锚点)
- 动态伪类：focus、hover、active(“元素名:动态伪类{ }”)
- 组合选择符
后代选择器、交集&并集选择器
- 后代选择器：“祖辈 后代{ 样式; }”(祖辈、后代可为：标签选择器，类选择器)
- 交集选择器：
- 并集选择器：“标签，id，类{ }”
- 属性选择器：
2.3 CSS样式优先级
2.3.1 CSS的继承性（标签从祖先继承来的属性）
- 最近的祖先样式比其他祖先样式优先级高
- “直接样式”(标签自身拥有的属性)比"祖先样式"高
<div style="color:red">
<div style="color:blue">
<div class="son" style="color:pink">
</div>
</div>
</div>
2.3.2 选择器的优先性（标签自有的属性）
内联样式 >选择器： id > class = 属性选择器 = 伪类 > 标签 = 伪元素 (::before)
//HTML
<div class="class1" id="id1" style="color:black"></div>
//CSS
#id1{color:red;}
.class1{color:blue;}
div{color:grey;}
// div最终的颜色为black
2.4 常用样式属性
2.4.1 盒子模型、边框、边距、填充
- 所有HTML元素可看作盒子：外边距(透明的)、边框、填充(内边距，透明的)、和实际内容
- 元素总weight=weight + 左右填充+左右边框+左右边距
(注意：box-sizing:
content-box(默认值，盒子宽=weight+左右填充+左右边框+左右边距)
border-box(盒子宽=weight))
- 边框
边框样式：border-style:solid(实线框)、inset(3D嵌入)、outset(3D突出)
边框宽度：border-width:5px
边框颜色：border-color
边框属性简写：border:5px solid red;
单独各边：
- border-top / right / bottom / left-style
- border-style:4值(上右下左)、3值(上、右左、下)、2值(上下、右左)、1值(4边)
2.4.2 背景、文本、字体、显示
- 背景：background-color、background-image
background-color:#ff0000 / rgb(255,0,0) / red
background-img:url(‘img.gif’)
- 背景图像-水平或垂直平铺(默认是水平与垂直方向平铺)
background-repeat:repeat-x;(只在水平方向平铺)
- 背景图片-设置定位与不平铺
background-repeat:no-repeat;
backgrouond-position:right top;(x、y轴)
- 文本
文本颜色、文本对齐方式、文本修饰、文本转换、文本缩进
<style>
h1{
text-align:center;text-transform:capitalize;text-shadow:2px 2px blue;}
p.data{
text-align:right
最低0.47元/天 解锁文章
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
