一、CSS作用
CSS就是给HTML装饰
二、CSS语法
在style
里写CSS
由选择器 后面在大花括号里写声明
CSS声明要以 “; ”
结束
三、CSS用法
id选择器和class选择器(!!!)
1.id选择器
可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
2.class选择器
跟id选择器的用法差不多,只不过是用".“来定义,html里面用"class=”" "来命名
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
下面是CSS基础选择器
Text文本!!
1.!!对齐文本text-align
h1 {text-align:center;}
center就是居中
除了center 还可以有right,left,就是右对齐和左对齐
2.缩进文本text-indent
p {text-indent:50px;}
indent后面跟的就是缩进几个字符,如果是首行缩进两个字符那样的话就是
p {text-indent:2em;}
3.!!装饰文本text-decoration!!
a {text-decoration:none;}
text-decoration
后面可以跟none
就是没有装饰,一般用途就是把链接自带的下划线消除
- 还可以跟overline上划线,afterline下划线,line-through删除线
4.文本转化text-transform
用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母,或每个单词的首字母大写。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
uppercase
字母大写lowercase
字母小写capitalize
每个单词首字母大写
5.颜色color
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
以上是比较常用的文本,下面是所有文本属性
注意:
letter-spacing
是控制每个字母间距,word-spacing
是每个单词间距 如果要控制汉字间距的话还是用letter-spacing
字体font!
1.font-style
font-style:normal;
正常
font-style:italic
;斜体
2.font-weight
文字粗细 一般用normal正常 也是400px
大于400px就加粗,小于就变细
3.font-size
字体大小 多少多少px px是单位
4.font-family
字体系列
常用微软雅黑 宋体
CSS创建!!!
1.外部样式表(常用)
是在head下面插入link标签,再新建一个.css
文件,在.css文件里面写CSS内容,像这样:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
href里面就是CSS链接名,注意路径问题, 外部样式表在以后是最常用的
2.内部样式表
在html的head里加style属性,在style里写css,像这样
<head>
<style>
hr {
color:sienna;
}
p {
margin-left:20px;
}
body {
background-image:url("images/back40.gif");
}
</style>
</head>
3.内联样式表(不推荐使用)
在相关的标签内使用样式(style)属性即可。要慎用。具体就像这样
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
复合选择器!!!
1.后代选择器
2.子代选择器
元素1>元素2 {样式声名}
元素2是元素1 的亲儿子,离元素1最近的
3.并集选择器
4.伪类选择器
主要用链接伪类
注意: hover要在link visited 后面,才会有作用
列表
无序列表的 li 前面默认的是小圆点,css可以给他换了
有序列表的 li 前面默认是1.2.3.4… 咱用css也能给他换了,
就像这样
ul.a {
list-style-type: circle;
}换成空心小圆点
ul.b {
list-style-type: square;
}小方块
ol.c {
list-style-type: upper-roman;
}罗马数字
ol.d {
list-style-type: lower-alpha;
}小写字母样式
把默认的清除是这样
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
注意: 列表也可以用来排版,每个 li 是一个div ,这时候就要用上面的代码把那些默认符号清除
表格
表格边框
table, th, td
{
border: 1px solid black;
}
但这样的边框是双着的,因为th/ td元素有独立的边界。那么要想弄成单边框这样写
table {
border-collapse:collapse
}
然后还有表格宽度width,高度height
可用多少多少px,多少多少em,或者百分号来描述
在表格里,也可以用
td {text-align:right;}
来让单元格里的文本对齐,或者center居中
如果 要控制边框和表格内容之间的间距用padding,像这样
td{
padding:15px;
}
当然,color来设置表格颜色
注意 其实一般我们都会用div,div就是一个盒子,也可以设置边框,表格可以方便排版
div {
border:1px solid #fff
}
背景
background-color
背景颜色
body {
background-color:#b0c4de;
}
background-image
插入背景图片
body {
background-image:url('paper.gif');
}
其中,url后面是图片名
background-repeat
平铺
可以定义图片repeat-x在水平方向平铺,或者no-repeat 不重复
body {
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
background-attachment
就把图片固定
官方说明就是 背景图像是否固定或者随着页面的其余部分滚动。
body {
background-attachment:fixed;
}
background-position
背景图片位置
body {
background-position:center;
}
还可以是right,left,right top ,left top
注意: 插入背景图片和直接插入HTML(
img src=""
)图片的区别:
插入背景图片可以更好的控制图片位置
盒子模型!!!!
1. 边框border
-width/-style/-color
分别是粗细,样式,颜色
border-style 可以是solid
实线,dotted
点线,dashed
虚线,一般我们常用solid
要不想有颜色的话用transparent
透明的意思
还可以分别设置四条边框的样式
用border-top/border-bottom/border-left/border-right
来定义就行了
注意:border会影响盒子大小
2. 内边距padding
跟border一样可以分别设置四条边用-top来定义就行了
简写:
- 在设置盒子div的时候,可以不加宽,只加相同的
padding
,让它自己撑开,在一些时候可以这样,看着美观- 在div套娃的时候,不用写width,只写
padding
就可以让俩盒子一样宽
3. margin外边距
- 除了是控制俩盒子的距离外,还有一个用处是 让盒子水平居中(块级盒子) 但必须满足这两个条件
圈1 盒子必须有宽度
圈2 盒子的左右margin为auto
即margin:auto
或者margin:0 auto
- 那么,要想让行内或者行内块元素水平居中咋办捏
这样办: 给他们的父级元素加text-align:center
- 还有在套娃的时候会出现凹陷问题 解决方法就是合并 可以给元素定义 上边框,上内边框,或者
overflow:hidden
隐藏display和visibilit!!!
display
可以用来隐藏元素,用法:display:none
(不占空间)
display还可以来转换
比如把块级元素变成行内元素这样办:display:inline
块级是block 行内块是inline-block 类似的 在display后面定义就行了
visibility
来隐藏,用法:visibility:hidden
(会占未隐藏时的空间)
position定位!!!!!!
定位=定位模式+边偏移 定位模式有 static,relative,absolute,fixed,sticky
边偏移就是top,bottom,left,right
当使用 position 来对齐元素时, 通常 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。
body {
margin: 0;
padding: 0;}
-
static默认
-
relative相对位置 (很重要)
是相对其正常位置,但它原来所占的位置空间不变
主要用来限制别的定位,常与absolu搭配使用 -
absolute 定位(很重要)
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于整个页面 不占空间 且脱标(比浮动还飘)
"子绝父相"
父元素里加相对位置,子元素里加绝对位置,这样就可以让加了绝对位置的子元素,在父元素的相对框架里摆放。很重要,很常用。注意:加了绝对位置的子元素会以最近一级 带有定位的祖先元素为参考,如果都没有定位的话,就会以页面为参考。
>让绝对定位的盒子居中
> .div {position :absolute;
> left :50%;
> margin-left :-100px;/*负号后面的值是height值的一半*/
> margin-height :-100px;/*负号后面的值是height值的一半*/
> width :200px;
> height :200px;}
- fixed定位
即使窗口是滚动的它也不会移动:
它仅仅是以可视窗口为参考,与父元素没关系。
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
fixed一个应用*:让一个盒子固定在版心的左侧
.div {
position:fixed
left:50%
/*假定版块的width为200px*/
margin-left:100px
}
- sticky
粘性定位的元素是依赖于用户的滚动,在position:relative
与position:fixed
定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
很漂亮的一个东西,但兼容性差,一般不会使用。我们所见的网页上类似这样的功能是用JS写出来的。
具体这样使用
.div {position:sticky
top:0}
/*必须有top bottom left right至少其中一个才有效*/
简单总结一下position
z-index属性
指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
一个元素可以有正数或负数的堆叠顺序:
z-indx后面的数值越大,所定义的元素越在前面显示
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
运行出来是这样
注意
z-indx后面的数一定没有单位!!!!!
只有定位的盒子才能使用z-indx!!!!!!
overflow!!
属性用于控制内容溢出元素框时显示的方式。
可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
css三大属性!!
1.层叠性
2.继承性
给父元素设置属性后,后代元素也可以使用该属性
3.优先级
内联>id>class=伪类=属性>标签=伪元素
就是专属是最厉害的,但也有叠加
浮动!!!!!!
-
标准流是竖着排的,浮动就可以让元素横向排列
-
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
可以让块级元素在一行上面显示(没有空隙) -
浮动可以用来指定任意元素
-
float:left/right
浮动这样写
特点:
- 会脱标 不再保留它原来的位置 浮动后面 的元素会占据它原来的位置(如果后面的元素没有设置浮动的话)(占据它原来的位置就是 后面没有设置浮动的元素 会紧靠着标准流的位置)
- 会在一行内显示且元素顶部对齐
- 具有行内元素的特性
注意
浮动经常搭配父元素使用,让父元素排上下,再在父盒子里面加float,排左右
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的
> 清除浮动
-为什么要清除浮动
一些父盒子不方便设置height,当父盒子height为0的时候,后面的盒子不想受已经浮动盒子的影响,那么就再设置清除浮动
所谓清除浮动就是清除浮动的影响
-清除浮动的方法
1.
再在style里设置这个新的空标签:.clear:both {clear=both;}
2.
3.
4.
对齐
块级元素
水平居中
margin:auto
width:100px
/*一定要设置width*/
- 垂直居中
1.设置padding
2.position 子绝父相
3.transtion:translate(x,y)
其实布局最好用的就是
display:flex
(后面具体写关于flex布局)
具体做法就是给父元素加
display:flex;
justify-content:center;
/ * 默认主轴为X轴,主轴居中 * /
align-text:center;
/*这里表示垂直居中*/
行内、行内块元素
水平居中
给其父元素添加text-align:center
- 垂直居中
给其设置line-hight:56px(值为其所在盒子的高)
当然,定位和浮动也可随时使用
图片
把图片放进块元素,再设置margin:auto
伪类
首先区分伪类和伪元素
- 链接伪类
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
注意:伪类的名称不区分大小写。
- 结构伪类!!
1.nth-child
可以使用
:first-child
伪类来选择父元素的第一个子元素。
last-child
即来选择父元素的最后一个元素。
例如
<head>
<style>
p:first-child {color:blue;}
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
</body>
在浏览器中显示
注意
nth-child执行时的语法规则
即nth-child会先去看后面括号里的数字,再看前面的父元素
另外关于nth-child(n)
2.nth-of-type
与first-child类似,first-of-type即为指定类型父元素E的第一个子元素
与nth-child不同的是语法规则
nth-of-type会先看前面的父元素,再看后面括号里的第几个子元素。
- lang伪类
:lang
伪类允许您为不同的语言定义特殊的规则。
在下面的例子中,:lang 为属性为 lang=“en” 的 元素定义引号:
<html>
<head>
<style>
q:lang(en) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
在浏览器中显示
伪元素
1.:first-line 伪元素
用于向文本的首行设置特殊样式。
注意:“first-line” 伪元素只能用于块级元素。
2.:first-letter 伪元素
用于向文本的首字母设置特殊样式
注意: “first-letter” 伪元素只能用于块级元素。
伪元素可以结合CSS类
p.article:first-letter {color:#ff0000;}
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
3.::before和::after!!
注意:
::before是在body里找不着的!!
必须有content:""
before是在父元素的前面创建一个行内元素,after同。
不透明度
opacity
后面跟0.0-1.0
值越小越透明
通常会与hover搭配使用
但! 使用 opacity 属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读:
像这样
我们可以用RGBA设置背景色,这样就只改变了背景颜色,文本不受影响。
导航栏!!
- 垂直导航栏
1.一般会用<ul> <li>
来排版
2.消除标签前面的小圆点:list-style-type:none
3.导航栏里一般是链接,是行内元素,要想让链接垂直显示,要转化为块级元素display:block
,接着可以设置宽高,用text-align:center
让文本居中
4.通常还会使用a:hover
5.向当前链接添加 “active” 类,以使用户知道他/她在哪个页面上
- 全高固定垂直导航栏
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* 全高 */
position: fixed; /* 使它产生粘性,即使在滚动时 */
overflow: auto; /* 如果侧栏的内容太多,则启用滚动条 */
}
- 水平导航栏
1.<ul><li>
是块级元素,要想让其水平显示,添加display:inline
2.设置padding
让其更美观
3.设置float::left
其与垂直导航栏类似操作
为
<ul>
添加position: sticky
;,以创建粘性导航栏。
粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的,直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置
但sticky的兼容性不大,不常使用。
下拉菜单!!
通常会结合position
display:none和block
z-index
然后就是基本的hover
标签
主要是display隐藏的应用
<style>
/* 设置下拉按钮 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉内容 隐藏 */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
/* 鼠标经过时隐藏的元素显示*/
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
可再结合前面,完成下拉导航
图像精灵
- 图像精灵是单个图像中包含的图像集合。
包含许多图像的网页可能需要很长时间才能加载,同时会生成多个服务器请求。
使用图像精灵将减少服务器请求的数量并节约带宽。 - 一般通过将所需图片插入为背景图片,进而控制图片大小,位置。
- 要精确测量所需图片的大小,才能更好的展现效果。
#prev {
/*所需图片的宽高 设置为盒子宽高*/
left: 63px;
width: 42px;
/*调整图片,让所想效果展现*/
background: url('/i/css/navsprites_hover.gif') -47px 0;
}
属性选择器!
我们可以设置带有特定属性或属性值的 HTML 元素的样式。
若需为不带 class 或 id 的表单设置样式,属性选择器会很有用
1. [attribute] 选择器
下例选择所有带有 target
属性的 <a>
元素;
a[target] {
background-color: yellow;
}
2. [attribute=“value”] 选择器
下例选取所有带有 *target="_blank"
属性的 <a>
元素*:
a[target="_blank"] {
background-color: yellow;
}
3. [attribute~=“value”] 选择器
[attribute~=“value”] 选择器选取属性值包含指定词的元素。
下例选取 title 属性包含 “flower” 单词的所有元素:
[title~="flower"] {
border: 5px solid yellow;
}
4. [attribute|=“value”] 选择器
[attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素。
注:值必须是完整或单独的单词,比如 class=“top” 或者后跟连字符的,比如 class=“top-text”。
下例选取 class 属性以 “top” 开头的所有元素:
[class|="top"] {
background: yellow;
}
5. [attribute^=“value”] 选择器
[attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素。
提示:值不必是完整单词!
下例选取 class 属性以 “top” 开头的所有元素:
[class^="top"] {
background: yellow;
}
/*下面将都被选中*/
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
6. [attribute$=“value”] 选择器
[attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。
提示:值不必是完整单词!
7. [attribute*="value"]
选择器
[attribute*=“value”] 选择器选取属性值包含指定词的元素。
提示:值不必是完整单词!
表单
- 用
pleaceholder
代替value
(这其实是HTML5里面新增的属性) - 使用
padding
属性在文本字段内添加空间。 - 默认情况下,某些浏览器在获得焦点(单击)时会在输入框周围添加蓝色轮廓。您可以通过向输入添加
outline: none
; 来消除此行为。 - 自动获得焦点
autofoucs
(这也是HTML5里面的新增内容) - 如果希望在输入框中包含图标,请使用
background-image
属性,并将其与background-position
属性一起设置。还要注意,我们添加了一个较大的左内边距(padding-left
)来留出图标的空间:
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
/*留出内容 与边框与图片之间的空隙*/
padding-left: 40px;
}
- 使用 resize 属性可防止对 textareas 调整大小(禁用右下角的“抓取器”):
resize: none;
- 其他表单属性都可以用CSS来设置
计数器
- 带计数器的自动编号
counter-reset -
创建或重置计数器
counter-increment -
递增计数器值
content -
插入生成的内容
counter() 或 counters()
函数 - 将计数器的值添加到元素
如需使用 CSS 计数器,必须首先使用 counter-reset 创建它。
下面的例子为页面(在 body 选择器中)创建一个计数器,然后为每个 <h2>
元素增加计数器值,并在每个 <h2>
元素的开头添加 "Section <value of the counter>:"
:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>使用 CSS 计数器:</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h2>JavaScript 教程</h2>
在浏览器中显示
- 嵌套计数器
下面的例子为页面(section)创建一个计数器,为每个<h1>
元素(subsection)创建一个计数器。
“section” 计数器为每个
<h1>
元素计数,同时写入 “Section” 以及 section计数器的值,“subsection” 计数器为每个<h2>
元素计数,同时写入 section 计数器的值以及 subsection计数器的值:
`body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML 教程:</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML 教程:</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>`
在浏览器中显示
- 我们使用 counters() 函数在不同级别的嵌套计数器之间插入一个字符串:
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
在浏览器中显示
CSS单位
数字和单位之间不能出现空格。但是,如果值为 0,则可以省略单位。
对于某些 CSS 属性,允许使用负的长度。
长度单位有两种类型:绝对单位和相对单位。
- 绝对单位
绝对长度单位是固定的,用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。
不建议在屏幕上使用绝对长度单位,因为屏幕尺寸变化很大。但是,如果已知输出介质,则可以使用它们,例如用于打印布局(print layout)。
- 相对单位
相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。