HTMLCSS样式基础（必看篇）⼀、css
1.什么是css？
Cascading Style Sheet 级联样式表
改变样式的⼀个⼯具，说⽩了，就是为了让我们的页⾯好看，
HTML底层封装了css这样⼀个⼯具。
2.怎么使⽤css
a、style 风格、样式
这个关键词写到标签内部，可以修改标签的样式
注意：写在标签内部！也就是>⾥⾯
3.css样式，分为三种
a、⾏内样式表
<p >111111111111</p>
其中：就是改变当前这个标签的样式。
b、内部样式表
选择器：告诉程序，我们要改变谁的样式。
id选择器：
1、在标签内加上id属性
2、在写之前，要加上#
CSS Code复制内容到剪贴板
1. id选择器演⽰
2.
3. <!--写在源代码内-->
4. <h1 id="www">望庐⼭瀑布</h1>
5.
6. <!--写在CSS样式内-->
7. #www{
8.    　background-color:#0CF;
9.      }
类选择器：
1、在标签内加上class属性
2、类选择器，写之前，要加上.
CSS Code复制内容到剪贴板
1. 类选择器演⽰
2.
3. <!--写在源代码内-->
4. <p class="qqq">111111111111</p>
5.
6. <!--写在CSS样式内-->
7. .qqq{
8. background-color:#0F9;
9. }
注意：以.开头
标签选择器：
CSS Code复制内容到剪贴板
1. <style type="text/css">//style关键词
2. p{//p标签，标签选择器，查所有相对应的标签
3. color:#F33;//要改变的样式。
4. }
5. </style>
注意：
1、style⾥⾯要写上type属性，标识这是改变css
2、选择器后⾯要加上⼀对{} ，
3、每⼀句改变样式之后，要加上;
c、外部样式表
写在我们⽹页的外⾯
1、新建⼀个css
2、在css中写上相对应的样式
3、将css样式导⼊⽹页
a、<link href="1.css" rel="stylesheet" type="text/css" />
b、<style type="text/css"> @import url("css路径"); </style>
d、样式表的优先级
⾏内样式表>内部样式表>外部样式表
e、选择器的优先级
id选择器>类选择器>标签选择器
f、并集选择器
通过⼀个详细的描述或者说地址来查某⼀个或者某⼀组相对应的标签
p,#id,.class{}
会改变所有p、id和class所覆盖的标签样式，中间⽤英⽂输⼊法的“,”号隔开
g、交集选择器
会先查h3标签，再查所有h3标签⾥⾯的类名为second的标签修改属性
中间没有任何东西进⾏连接
h、后代选择器
CSS Code复制内容到剪贴板
1. table tr .qq{
2. background-color:#F00;
3. }
会根据所写的标签或者选择器，进⾏⼀层⼀层的查，直到最后查到所需要的标签，中间⽤“ ”隔开⼩结：
标签选择器是直接应⽤于所有的HTML标签
类选择器可以在页⾯中多次使⽤
html横向滚动条样式
id选择器在页⾯中只能使⽤1次
i、css属性
1、字体样式：
font-style：设置字体风格
font-weight：设置字体粗细
font-size：设置字体尺⼨
font-family：设置字体系列
font：把以上所有的设置全部设置在⼀个属性中
2、⽂本样式：
color：设置字体颜⾊
line-height：设置⾏⾼
text-align：设置⽂本的对齐⽅式
text-decoration：设置⽂本的装修，例如：underline、none、line-through 3、背景属性：
background-color：设置背景颜⾊
background-image: 设置背景图⽚
background-position：设置背景的位置
background-repeat：设置背景的填充⽅式
background 设置背景，把以上所有的设置全部设置在⼀个属性中
4、列表属性：
list-style-image：将列表设置为列表标识
list-style-type：设置列表的标识类型，disc实⼼圆，circle空⼼圆，square正⽅形
list-style：把以上所有的设置全部设置在⼀个属性中
5、超链接的伪类
a:link{ 未访问的链接
color:#F00;
}
a:visited{ 已访问的链接
color:#6F6;
}
a:hover{ ⿏标悬浮改变样式
color:#FCC;
}
a:active{ ⿏标长按改变样式
background-color:#0FF;
}
6、cursor属性
url 设置⾃定义⿏标样式
default 默认光标
pointer 超链接的指针
wait 程序正在忙
help 指⽰可⽤的帮助
text 指⽰⽂本
crosshair ⼗字型
move 可移动指针
7、盒⼦模型
a、什么是盒⼦模型？
把相对应的元素放⼊到⼀个容器中，可以进⾏相对应的处理
移动或者处理这个盒⼦模型的同时，整个在盒⼦模型中的元素都会跟着
被处理。
边距：
内边距：
padding：top,left,right,bottom
外边距：
margin：top,left,right,bottom
b、浮动
什么是浮动？
其实原理就是align
浮动的属性：
left：左浮动
right：右浮动
none：不浮动
clear属性：清除浮动，both全部清除
c、overflow属性
当有元素溢出时，应如何处理
visible 默认的
auto ⾃动的
hidden 隐藏
scroll 加上滚动条
d、iframe标签
内联框架。
可以导⼊其他东西。
<iframe src="1.html" width="1366px" height="200" scrolling="no"
frameborder="0">
src：导⼊其他的页⾯路径
width：调整导⼊的页⾯的宽度，px是单位，可以不加，默认就是px
height：调整导⼊的页⾯的⾼度
scrolling：是否显⽰滚动条
frameborder：是否显⽰边框，1表⽰显⽰，0表⽰不显⽰
e、position属性
定位。
相对定位：
relative，相对他原来的位置，进⾏移动。
绝对定位：
absolute，
fixed
定位到⽹页的某个地⽅，⼀直不变。
static
偏移值的设定
X轴(left、right 属性)与Y轴（top、bottom属性）
可取值：像素或百分⽐
以上这篇HTML CSS样式基础(必看篇)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。