2 .CSS简介,为什么需要CSS,选择器
目录
CSS基础入门
第一节：CSS简介
1.1 为什么需要CSS
通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面。
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
总体来说，CSS具有以下特点：丰富的样式定义 易于使用和修改 多页面应用 等。
html 网页 素颜女孩 css 化了妆得女孩
第二节：CSS应用
2.1 行内样式
<p style="color:red; font-size: 40px;">白日依山尽</p>
2.2 内部样式
p{
color:red;
font-size: 40px;
}
<style>
<p>白日依山尽</p>
第三节：基础选择器
<h1>静夜思</h1>
<p>床前明月光</p>
<p class="libai" id="two">李白在化妆</p>
<p >床下鞋两双</p>
<p class="libai">一看是老王</p>
3.1 标签选择器
/* 1.标签选择器: 选中页面中所有的同类标签 */
p{
color:yellow;
}
3.2 类选择器
/* 2.类选择器 用 . 表示类 可以重复使用 */
.libai{
color:green;
}
3.3 id选择器
/* 3.id选择器 用 # 表示id */
#two{
color:red;
}
3.4 优先级
/* 相同属性的情况下： 优先级：行内样式表 >id > class > 标签 /
/ 注意：同种属性 按照优先级显示 */
3.5 伪类选择器
usahiodh覅oh是滴哦
### 第四节：常见css属性4.1 边框样式
<style>
/* 1.边框样式 */
p{
/* 总体设置 */
border:1px solid red;
/* 边框的宽度 */
border-width:5px;
/* 边框的样式 solid 实线 dashed虚线 */
border-style:dashed;
/* 边框颜色 */
border-color:yellow;
/* 右侧边框颜色 */
border-right-color:blue;
/* 左侧边框宽度 */
border-left-width:10px;
/* 上侧边框的样式 */
border-top-style:solid;
/* 设置p标签大小 */
/* p标签的宽度 */
width:200px;
/* p标签的高度 */
height:200px;
/* 设置边框圆角 */
/* 如果写一个数，四个角都按照这个数圆角 还可以分别设置4个角 */
/* 还可以分别设置4个角 从左上角---》左下角 顺时针顺序 */
border-radius: 20px 30px 80px 100px;
}
</style>
</head>
<body>
<p>规范化的法国</p>
</body>
4.2 文字样式
<style>
p{
/* 字体颜色 */
color:red;
/* 字体大小 */
font-size:40px;
/* 字体样式 */
font-style:italic;
/* 字体类型 */
font-family:楷体;
/* 字体粗细 100-900 bold bolder */
font-weight:bolder;
}
</style>
</head>
<body>
<p>感到翻跟斗风格</p>
</body>
4.3 文本样式
text-align 文本居中
line-height 行高
white-space 是否换行nowrap
letter-spacing 字体间距
text-indent 缩进
text-decoration 文本修饰
<style>
p{
color:white;
font-size:30px;
}
</style>
</head>
<body>
<p>字体文本效果</p>
list-style
<style>
.p1{
border:1px solid red;
width:200px;
height:200px;
/* 水平方向文本对齐方式 center left right*/
text-align:center;
/* 行高：每一行文本占据的高度 */
/* 当行高===高时有垂直居中的效果 */
line-height:200px;
/* 设置是否自动换行 */
white-space:nowrap;
/* 字体间距 */
/* letter-spacing:10px; */
/* 首行缩进 em 一个字符的大小 */
text-indent:2em;
/* 文字的修饰
none 没有修饰 underline 下划线 overline 上划线 line-through 贯穿线/中划线*/
text-decoration:line-through;
}
td{
/* 1.用在表格中，调整表格中内容的垂直对齐方式 类似 valign
2.调整元素相对于基线的对齐方式
*/
vertical-align:bottom;
}
.p2{
border:1px solid red;
}
img{
vertical-align:middle;
}
ul{
/* 去掉列表样式 */
list-style:none;
}
</style>
</head>
<body>
<p class="p1">感到翻跟斗广泛士大夫活动分工和法国回到法国警方给</p>
<table border="1" cellspacing="0" width="200px" height="200px" >
<tr>
<td >德国法国</td>
</tr>
</table>
<p class="p2">sadssfdsdgdfgjgfhkghk<img src="../images/7.gif"></p>
<ul>
<li>第一章</li>
<li>第二章</li>
</ul>
</body>
4.4 背景样式
<style type="text/css">
p{
border:1px solid red;
width:500px;
height:500px;
/* 背景颜色 */
/* rgba red green blue alpha 透明度 (0-1)越来越不透明 */
/* background-color:rgba(255,0,0,1); */
/* 背景图片 */
/* background-image:url(../images/7.gif); */
/* 背景平铺 no-repeat 不平铺 repeat-x/y 在x轴或者y轴平铺*/
/* background-repeat:no-repeat; */
/* 背景位置 */
/* 1.方位表示 水平方向(left center right) 垂直方向(top center bottom) */
/* background-position:right top; */
/* 2.百分比 */
/* background-position:10% 20%; */
/* 3.坐标表示 */
/* background-position:100px 100px; */
/* 调整背景图片的位置，其实就是调整的图片左上角点的坐标 */
/* 背景图片的大小 */
/* background-size:200px 200px; */
/* 顺序： 颜色 图片 平铺 位置 大小 */
background:red url(../images/4.gif) no-repeat 100px 100px / 200px 200px;
}
</style>
</head>
<body>
<p>德国发动反对改革</p>
</body>
浙公网安备 33010602011771号