对网页进行美化的工具
- css代码语法格式
- css代码和html代码结合的方式
- 1:直接将样式代码写到style代码中;
- <p style ="font-size:30;color:red;">一段</p>
- 样式的编写语法 样式名:样式值;样式名:样式值;
- css代码和html代码结合的方式
以上这种样式的应用方式称为“行内样式”，行内样式存在的问题：将样式和标签内容耦合在一起，没有办法实现样式代码的复用
将样式代码和html标签分开编写，在html中提供了一个专门的标签 style来在当前页面中嵌入css样式代码，这种方式我们称为“内部样式”
这种方式需要结合CSS中提供的选择器一起使用
实现了网页内容和网页样式的分离,好处是可以实现样式代码在多个不同的标签上进行复用，后期的维护也变得比较方便
<head>
<style>
h1,p,li{font-size:30px;color:blue;}
//将定义的样式应用到当前页面的h1 p li上
</style>
</head>内部样式可以实现一定程度的复用，但是没有办法实现跨页面复用
- 2.让css代码复用
- 内部样式:结合css中的选择器一起使用
- <style></style> 写在head里面
- 不能跨页面复用
-
3.整个项目复用:将样式代码单独设计到一个.css文件中
- 在页面中用link 引用 在head中 <link href="style.css " rel="stylesheet" type = "text/css">
- css称为外部样式
css选择器:提供了三种基本选择器
-
用标签名选择
-
类选择器:为指定的元素或者目标添加class属性,然后在css中使用. 一个标签可以同时设置多个类名 class="aaa bbb" 中间使用空格分隔
-
一个标签只能设置一个class 用两个属性:
-
-
id选择器 给元素指定一个样式: id="third" :用法: (不推荐id选择器;id一般给javascript使用)
-
-
组合选择器:
-
-
组合选择器： 选择器1,选择器2,选择器3{样式代码}
-
-
子元素选择: 父元素选择器>子元素选择器
.u2>li li就是u2的子元素
直接相关的元素叫子元素
后代元素选择器包含子元素 .后代元素选择： 先辈元素选择器 后代元素选择器
-
-
常用样式属性
- 文本样式属性：用来设置网页上文字的样式，不管这个文本在哪个标签中
-
font-size:设置文本字体大小 单位为px 像素
- color设置文本颜色 英文单词; rgb ;#六位16进制;
-
text-align:设置文本水平对齐方式 left center right
-
text-decoration:设置文本的装饰线 取值：underline none (去除) 我们学习这个属性的目的不是为了给文本加装饰线而是为了去除a标签的划线
-
-
DIV盒子
-
背景属性
-
: background-image :设置背景图片;若是图片小,则会多个图片填充满
-
设置图片平铺:background-repeat -x :横向铺满 -y纵向铺满
-
no-repeat 不平铺
-
background-position:设置背景偏移量 每个元素都有自己独立的坐标系，坐标原点在左上角 往右为x轴正方向 往下为y轴正方向
-
-
简写的方式:
-
-
第一个123在图片内 第二个123在图片外
-
-
-
- 块元素：特点：a.独霸一行 b.宽高有效 h1 p hr div ul li ol dl dt dd ....块元素默认（在没有设置宽高的情况下）和父元素同宽和内容同高
-
.行内元素： 特点：a.允许多个元素同行显示(在父元素宽度足够的情况下) b.宽高无效 a span input select textarea ... 行内元素在没有设置宽高的情况下和内容同宽同高
-
行内块元素:同时具有行内和块的特征; 允许同行 宽高有效 img
-
在css中提供了改变元素的显示方式的属性
-
在CSS中提供了改变元素的显示方式的属性：
display: 四个取值
block:以块元素方式展示
inline：以行内元素方式展示
inline-block:以行内块元素的方式展示
none:设置元素不显示
元素不显示的另一种控制方式： visibility 两个取值: visible 可见 hidden 隐藏 和display:none;不同 元素隐藏后原来所占的空间不会释放
- 文本样式属性：用来设置网页上文字的样式，不管这个文本在哪个标签中
7073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
