文章目录
学习网站: W3school
网址: https://www.w3school.com.cn/css/index.asp
简介
CSS 是一种描述 HTML 文档样式的语言,用于描述应该如何显示 HTML 元素。
CSS 指的是层叠样式表* (Cascading Style Sheets)，它可以同时控制多张网页的布局。外部样式表存储在 CSS 文件中。
###一个描述例子:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>我的第一个 CSS 实例</h1>
<p>这是一个段落。</p>
</body>
</html>
由上可见,基本结构是:
- css控制写在<style>内,<style>写在<head>内
- 内容(如段落在<p>内,标题在<h1>内,列表在<ol或ul>+<li>内)在body内
- <body>,<head>都在<html>内
下面都是基于此前提
CSS语法
选择器指向您需要设置样式的 HTML 元素。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号;分隔
声明块用{花括号}括起来
选择器
5种简单选择器
2. 对某id: 应用于属性中< id=“para1” >的 HTML 元素
3.类选择器: 应用于属性< class=“center” >的 HTML 元素
4. 通用选择器：影响页面上的每个 HTML 元素
5. 分组选择器:多个元素,定义同一种样式时,可以合并
跳转方案参考:Markdown页内跳转实现方法
- 对某元素:所有的<p>元素都被 居中,红色
p { # 设置样式的 HTML 元素：<p>
color: red; # color 是属性
text-align: center; # text-align 是属性
}
- 对某id: 应用于属性中< id=“para1” >的 HTML 元素
#para1 {
text-align: center;
color: red;
}
<h1 id=para1> 这就是我 </h1>
<p id="para1">Hello World!</p>
<p>本段是不受样式的影响。</p>
注意：id 名称不能以数字开头。
3. 类选择器: 应用于属性< class=“center” >的 HTML 元素
.center {
text-align: center;
color: red;
}
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
<p>本段是不受样式的影响。</p>
- 进一步限制: 只有具有 class=“center” 的
元素会居中对齐
p.center {
text-align: center;
color: red;
}
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落将是红色并居中对齐的。</p>
- 也不一定,只能引用一个类:
.center {
text-align: center;
color: red;
}
.large {
font-size: 300%;
}
<p class="center large">本段将是center:红色、居中对齐 + large: 使用大字体。</p>
4. 通用选择器：影响页面上的每个 HTML 元素
* {
text-align: center;
color: blue;
}
- 分组选择器:多个元素,定义同一种样式时,可以合并
比如,h1,h2,p都要居中变红，可以分开，也可以成为一组：
h1, h2, p {
text-align: center;
color: red;
}
<h1>Hello World!</h1>
<h2>更小的标题</h2>
<h3>我也想居中对齐变红,大师马,怎么肥四?</h3>
<p>这是一个段落。</p>
注意:
这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
其他的格式需求
- 如何根据元素之间的关系,确定要应用css格式的部分
例如:
- 我用div分块后,只想要块内的段落p,应用定义的格式(段外的不用,)怎么办?
- div块内,还有一个section,里面的段落p想保留原格式,怎么办?
- 对于段外的,我可不可以让div的下一个相邻段落p用上我指定的格式?或者后面的全部p用上这个格式?
参考:CSS 组合器
- 根据特定状态,如悬停,超链接访问后,获得点击后等,来应用渲染
还可以:
是嵌套次序,如"首个p元素"“p元素的第一个i元素”“首个
元素中的所有 元素”
还可以为不同语言:如 为 lang=“en” 的元素定义引号
参考:CSS 伪类
- 设定元素一部分的样式:如首行,首字母
还可以:
设定,在每个<h1>元素前/后 插入一些内容。如一幅图
设定, 选中之后的文本的显示样式的变化
参考: CSS 伪元素
- 如果<a>元素有target属性,我就渲染
还可以:
如果a元素有target属性,且值为"_blank",我就渲染;
如果图片img的title中有"flower"字样,我就渲染; 还可以指定必须以flower开头/结尾
使用CSS :内部,外部,行内
-
内部css:
如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。
内部样式是在 head 部分的 <style> 元素中进行定义。
前面用的都是这种 -
外部CSS ：
通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！
- 首先，定义外部CSS文件,文件名为"mystyle.css"：
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
注意: 勿在属性值和单位之间添加空格,例如20px不是20 px
- 应用外部css
必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/demo/css/mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. 行内css(内联样式表,慎用)
用于为单个元素应用唯一的样式.
使用方法:
将 style 属性添加到相关元素(style 属性可包含任何 CSS 属性)。
注意,与添加到head中的区别.
<body>
<h1 style="color:blue;text-align:center;">这是标题</h1>
<p style="color:red;">这是一个段落。</p>
</body>
注意: 行内样式将内容与呈现混合在一起。请谨慎使用此方法。
当有多个css定义时,注意一个元素的显示:
- 优先级:看距离: 如果某元素被定义了多个样式,后面的样式会覆盖前面的
!important: 改变优先级,使本样式的优先级最高 - 层叠性: 不冲突样式,都会生效
- 继承性: p>span{内容},其中部分样式会从父级元素继承到子元素中
框,定位等
框
边框: border
- 边框的样式:
border-style,等价于border
基本样式展示
可以设置线条虚线,实线,双线等
- 取值与样式如下:
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
- 可为各边分别定义
定义上/下,右/左,或者上,右/左,下,或者上-右-下-左
p.soliddouble {border-style: solid double}
p.three {border-style: solid double groove}
p.four{border-style: solid dotted dashed double;}
<p class="soliddouble">Two nums given. bottom=top and left=right</p>
<p class="three">Three nums given. left=right</p>
<p class="four">Four nums given. CLOCKWISE: top-right-bottom-left</p>
理解这种用法:
分别定义四种边框.在给出的值小于4个时,发生值复制.
参考外边距处的解释.
特意只定义一边
border-top-color,border-right-color,border-bottom-color,border-left-color分开定义4个边,其中,color去掉不会影响效果.
- 可以只留一边:
p.solid {border-top-style:solid}
p.dotted {border-bottom-style:dotted}
- 也可以只替换一边
p {border-style:solid;}
p.none {border-top-style:none}
p.dotted {border-top-style:dotted}
border-style 的默认值是 none，边框消失了
如果您希望边框出现，就必须声明一个边框样式。之后的边框宽度才有效
如果希望边框透明(不可见),border-color: transparent;
- 边框的宽度:
border-width
使用2px或0.1em,或者是 thin < medium < thick 指定. - 边框的颜色:
border-color属性
颜色值参考这里
它一次可以接受最多 4 个颜色值;如果颜色值2个，值复制就会起作用。
实用方法
简写属性,用于把针对四个边的属性设置在一个声明。
p {
border: medium double rgb(250,0,255)
}
<p>Some text</p>
内边距: padding
- 最简单的,各边都有 10 像素的内边距
h1 {padding: 10px;}
- 也可以上下一组0.5cm,左右一组2.5cm
td.test2 {padding: 0.5cm 2.5cm}
<table border="1">
<tr>
<td class="test2">
这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。
</td>
</tr>
</table>
- 也可以单独设置 上-右-下-左(
从上外边距 (top) 开始围着元素顺时针旋转的) ,各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
等价于
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
其中,百分比数值:
百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。
上下,相对于width; 左右,也是相对于width,(不是height)
外边距: margin
- margin
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
/*margin: top right bottom left*/
h1 {margin : 10px 0px 15px 5px;}
2个值时的值复制示例:
指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。
如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。
最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。
- 希望除了左外边距,以外所有其他外边距都是 auto
p {margin: auto auto auto 20px;}
或
p {margin-left: 20px;}
其他的还有:
margin-top,margin-right,margin-bottom
- 外边距会折叠
垂直外边距会合并,这个开发时一般不用处理:
如果两者都是正值,则取两者间较大的
如果一正一负,它的效果是两者和
如果都是负值,则取两者中,绝对值较大的进行展示
父子元素间相邻外边距,子元素的值会传递给父元素,一般要处理.方法有
使其不相邻(如给父元素设置边框)
或不用外边距(如通过给父元素设置内边距来实现偏移)
定位
一切皆为框:
div、h1 或 p 元素常常被称为块级元素,这意味着这些元素显示为一块内容 : 块框
span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中 :行内框
可以使用display改变框的类型 参考这里:display 属性:
定位时,框,默认位置为在HTML中:
块级框: 从上到下,一个接一个排列
行内框: 在一行中水平布置
默认方式,即 CSS position属性为static. 还有其他3种方式,如下:
相对定位
元素框从原始位置(x,y)偏移至(x',y'),但是原始位置仍然被占据.
被占据的意思是,下一个框,会放在原始位置(x,y)之后.(绝对定位是会释放原始位置的)
为什么呢? 可以这样理解: 因为元素的新位置相对于它的原始位置。
下面的例子中,框2包含属性<id=box_relative>,可以看到,后面的框3默认放在框2 的原位置之后.
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
注意: 移动元素会导致它覆盖其它框。
样式 “left:-20px” 从元素的原始左侧位置减去 20 像素。
样式 “left:20px” 向元素的原始左侧位置增加 20 像素。
绝对定位
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
元素会释放原始位置,也可以认为,它不占默认位置。
框2包含属性<id=box_absolute >
#box_absolute {
position: absolute;
left: 30px;
top: 20px;
}
注意: 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
固定定位
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
#box_fixed{
position:fixed;
top:30px;
right:5px;
}
<p id="box_fixed">一些被安排的文本。</p>
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动框没有原始位置,它不在文档的普通流中
参考:CSS 浮动
颜色,背景,注释
颜色
- 首先,比较简单的用法
例如：red、green、blue、coral(珊瑚色)、brown (棕色)等
更多颜色名点击这里跳转到网页
下面再介绍2种设置颜色的方式,都比较通用.
- 在 CSS 中，可以使用RGB值指定颜色 :
rgb(red, green, blue)
每个参数（red, green, blue）定义颜色的强度，可以是 0 到 255 之间的整数或百分比值（从 0％ 到 100％）。
例如，值 rgb(0,0,255) 呈现为蓝色，因为 blue 参数设置为其最高值（255），其他参数设置为 0。此外，以下值定义相同的颜色：rgb(0%,0%,100%)。
与此相应: rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
<h5 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h5>
<h5 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h5>
<h5 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h5>
<h5 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h5>
<h5 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h5>
<h5 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h5>
<h1 style="color:rgb(255,0,0)">这是设置前景色:字体</h1>
还有一种有趣的方式:
- 十六进制颜色
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
#p3 {background-color:#0000ff;}
<p id="p1">红色 ff</p>
<p id="p2">绿色 00ff</p>
<p id="p3">蓝色 0000ff</p>
用 #RRGGBB 规定十六进制颜色，其中 RR（红色）、GG（绿色）和 BB（蓝色）十六进制整数指定颜色的成分（分量）。所有值必须在 00 到 FF 之间。
与此相应, 如需增加透明度设置，请在 00 和 FF 之间添加两个额外的数字。
#p1a {background-color: #ff000080;} /* 带透明度的红色 */
#p2a {background-color: #00ff0080;} /* 带透明度的绿色 */
#p3a {background-color: #0000ff80;} /* 带透明度的蓝色 */
背景
背景可以是纯色,或者使用背景图像.
纯色的
在head-style中设置:
body {background-color: yellow}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
其中:
body中的设置的样式,为整张页面(所有元素)设置背景色
background-color 其默认值是 transparent。
background-color 不能继承，也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
内边距padding,使文本相对于背景色边缘,缩进来一点点
接着,使用样式.在<body>中设置
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距,使用了padding来使内部缩进</p>
背景图片
以图像为背景，需要使用 background-image 属性。background-image 属性的默认值是 none.
- 与上类似,可以分别设置整张页面(body)
body {background-image: url(/i/eg_bg_04.gif);}
和局部的
p.flower {background-image: url(/i/eg_bg_03.gif); }
a.radio {background-image: url(/i/eg_bg_07.gif); padding: 20px;}
<p class="flower">我是个有背景的行,还没完,还有个连接<a href="#" class="radio">我是一个有放射性背景的链接。</a></p></p>
-
平铺吗?不平铺吗?
默认是平铺的,即background-repeat: repeat;
可以选择在一个方向上平铺:repeat-x 和 repeat-y
或者,不平铺:no-repeat -
确定图片在背景中的位置
可以利用 background-position 属性改变图像在背景中的位置。
例子: 在 body 元素中将一个背景图像居中放置
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
<body>
</body>
可选: top、bottom、left、right 和 center 或者 使用长度值，如 100px 或 5cm，最后也可以使用百分数值
但其实,虽然用了一个,解释的时候确实两个: center等价于 center center
那么,使用百分数就应该是:
background-position:50% 50%;
而background-position 的默认值是 0% 0%，这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺
使用长度:
background-position:50px 100px;
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
- 背景关联(在no-repeat时有用)
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。可以用background-attachment属性声明图像相对于可视区是固定的（fixed）。它的默认值是 scroll.
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed;
}
注释
- 位于
<style>元素内的 CSS 注释，以 /* 开始，以 */ 结束 - 使用<!–…--> 语法在 HTML 源代码中添加注释
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* 把文本色设置为红色 */
}
/* 这是
一条多行的
注释 */
</style>
</head>
<body>
<h1>我的标题</h1>
<!-- 这些段落将是红色 -->
<p>Hello World!</p>
<p>这段文本由 CSS 设置样式。</p>
<p>CSS 注释不会在输出中显示。</p>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
