CSS样式
CSS专门用来“美化”标签。
3.1快速了解
#当一个标签有style=XXX就是定义这一个样式
3.2 CSS应用方式
1.在标签上
2.在head标签中写style标签
用户注册
3. 写到文件中
#this.css文件
.c1{
height: 100px;
}
.c2{
color: red;
}
#rel="stylesheet"是链接与页面的关系，样式表关系，即引入外部样式表文件
#相当于导入
用户注册
用户注册
flask框架开发的不方便之处：每次都需要重启；规定有些文件必须要放在特定的文件夹；新创建一个页面（函数，HTML文件）
3.3选择器
类选择器（使用最多），ID选择器，后代选择器，标签选择器，属性选择器
- 北京
- 上海
- 深圳
- 美国
- 日本
- 韩国
关于多个样式和覆盖问题：
如果不重复就会一起被应用
有重复的则会应用CSS定义的下面一个，比如：
显示绿色，如果一定要用红色，则在color：red后面加上!important
显示红色
3.4 样式
1.高度和宽度
.c1{
height: 300px;
width: 500px;
}
ps:宽度支持百分比，高度不支持；行内标签默认无效，块级标签默认有效；
2.块级和行内标签
css样式：把标签转换为既具备块级标签的特点又具备行内标签的特点。
display：inline-block
广东
广东 —>将行内标签主动变为块级标签
注意：块级+块级&行内
3.字体和颜色
4. 浮动
右边
标签浮动起来就会脱离文档流
5.内边距
padding-top，padding-left，padding-right，padding-bottom
padding:20px 10px 5px 20px ->上边，右边，下边，左边
padding:25px 50px 75px ->上，左右，下
padding:25px 50px ->上下，左右
padding:25px ->上下左右4个填充25px
6.外边距
margin-top，margin-bottom，margin-right，margin-left
margin:25px 50px 75px 100px ->上边，右边，下边，左边
margin:25px 50px 75px ->上，左右，下
margin:25px 50px ->上下，左右
margin:25px ->上下左右4个边距25px
margin：0 auto 区域居中
总结
1.body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢？
body{
margin: 0;
}
2.内容居中
文本居中，文本会在这个区域中居中
区域居中，自己要有宽度+margin-left:auto;margin-right:ruto
.container{
width:980px;
margin:0 auto
}
abcdefg
3.行内标签的高度、内外边距，默认无效。
4.垂直方向居中的方式：文本+line-height；图片+边距
5.当标签默认有下划线，去掉下划线用line-decoration：none
6.鼠标放上去可以跳转hover
.c1:hover{
...
}
a:hover{
}
7. 设置图片透明度用opacity：0.X（数值范围是0~1）
8.清除浮动用clearfix
3.5 伪类
CSS伪类是用来添加一些选择器的特殊效果，例如hover和after
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
:after 选择器向选定元素的最后子元素后面插入内容。
3.6 position（fixed，relative，absolute）
fixed：固定在窗口的某个位置
relative：相对定位元素的定位是相对其正常位置。
absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于（relative和absolute一般一起用）。
3.7 border — 边框
border 是边框属性的简写属性。
border: solid; /* 边框样式 */ border: 2px dotted; /* 边框宽度 | 边框样式 */ border: outset #f33; /* 边框样式 | 边框颜色 */ border: medium dashed green; /* 边框宽度 | 边框样式 | 边框颜色 */ border: inherit; border: initial; border: unset; /* 全局值 */
3.8 background-color — 背景色
默认值为transport（透明）
#设置不同元素的背景色：
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
精彩链接
您阅读本篇文章共花了： 本文由 用户 于 2024-02-11 发布在 金钥匙，如有疑问，请联系我们。
本文链接：https://www.51969.com/post/18526831.html
发表评论