CSS
CSS
CSS：CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页内容的外观，并允许将样式信息和网页内容分离的一种标记语言。
CSS引入方式：
- 行内样式
- 内嵌样式
- 链接样式
行内样式：行内样式是所有引用CSS样式方法中最为直接的一种，它直接在HTML页面的元素中添加style属性，然后在style属性值中直接定义样式，例如：
< h1 style = "font-size:14px; color:#00ff00; "> CSS行内样式
行内样式是最简单的CSS样式使用方法，但由于需要为每一个标记设置style属性，不便于后期修改，维护成本较高，常常用于统一样式外的特殊情况。
内嵌样式：
< style type = "text/css">
h1{
font-size:14px; /* 文字大小为14像素 */
color:blue; /* 文字颜色为蓝色 */
}
链接样式：
连接外部css文件
< link href="css/index.css“ type="text/css“ rel = "stylesheet">
CSS：注释
/*下面是对< h1 >标记使用的CSS样式*/
h1{
color:gray;
}
/*
选择器：
- 基本选择器
- 复合选择器
- 伪类和伪元素选择
标记选择器：
p{
color:gray;
font-size:25px;
background-color:green;
}
类别选择器：
.类别名称{
属性1:属性值1;
属性2:属性值2;}
< style type = "text/css">
p{ /* 标记选择器 */
font-size:18px; /* 文字大小 */
color :blue ; /* 蓝色 */
}
.one{ /* 类别选择器 */
color:red; /* 红色 */
}
.two{ /* 类别选择器 */
color:green; /* 绿色 */
}
ID选择器：
#id名称{
属性1:属性值1;
属性2:属性值2;}
< style type = "text/css">
#one{ /* ID选择器 */
background-color:blue; /* 背景色为蓝色 */
color:#FFF; /* 文字为白色 */
}
#two{ /* ID选择器 */
font-size:20px; /* 文字大小为20像素 */
color:red; /* 文字为红色 */
}
复合选择器：
p.special{ /* 为class属性值为special的p标记设置样式 */
color:red;
font-size:23px;
}
h1#two{ /* 为id属性值为two的h1标记设置样式 */
font-size:30px;
background-color:blue;
}
h1,h2,p,h2.special,.one,#two{
text-decoration:underline; /* 设置下划线 */
font-size:15px;
}
h1 span {
text-decoration:underline; /* 设置下划线 */
font-size:30px;
}
input[type = text] { /* 为页面里的所有的文本框设置样式 */
border:1px solid #aaa;
}
p[class = p1] { /*为页面里class属性值为p1的所有< p >标记设置样式*/
color:#333;
}
p,span{
background-color: black;
/* 组合选择器 */
}
div p{
/* div里面的所有p改变 */
background-color: aliceblue;
}
div > p{
/* div里下一级p改变 */
color: aqua;
}
div+p{
/* div跟着的P */
background-color: blue;
}
a:link{
background-color: aliceblue;
/* 默认样式 */
}
a:hover{
/* 鼠标经过 */
background-color: aqua;
}
a:active{
/* 鼠标点击 */
color: #000;
}
a:visited
{
/* 鼠标点过后 */
color: aquamarine;
}
伪类选择器：
a:link {color:blue;} /* 设置未被访问过的超链接的文字颜色为蓝色 */
a:visited {color:blue;} /* 设置访问过的超链接的文字颜色为蓝色 */
a:hover {color:red;} /* 设置移动到超链接上时的文字颜色为红色 */
a:active {color:yellow;} /* 设置激活超链接时的文字颜色为黄色 */
< style type = "text/css">
h1{
color:#ff0000;
text-align:center; /* 水平居中 */
}
p::first-letter {
font-size:40px;
font-weight:bold; /* 文字加粗 */
}
p::first-line{
color:#0000ff;
}
CSS继承特性：
CSS的继承特性是指定义的样式不仅能应用到指定的元素，还会应用到其后代元素。
CSS层叠特性：
优先级：行内样式>ID选择器>类别选择器>标记选择器。
CSS颜色：
- 英文单词
- rgb
- 16进制代码
CSS盒子模型
在CSS中，一个独立的盒子模型由内容、border（边框）、padding（内边距）和margin（外边距）这4部分组成。通过width和height属性设定盒子内容的宽度与高度大小，通过border、padding和margin分别设置盒子的边框、内边距、外边距大小。
border边框：border-color（边框的颜色）、border-width（边框的粗细）和border-style（边框的样式）属性。
border-style属性：
- none：无边框
- hidden：隐藏边框
- solid：实线边框
- dotted：点状边框
- dashed：虚线边框
border-left:1px red solid; /* 左边框设置为宽度为1px的红色实
线 */
< style type = "text/css">
p.p1{
border:#00F 5px solid;
border-radius:10px;
/* 表示边框的四个角的圆角半径为10px */
}
p.p2{
background-color:#3399cc;
/* 设置背景色 */
border-radius:10px;
}
边框圆角：border-radius:10px;
border-radius:10px 20px; /* 左上角和右下角为10px，右上
角和左下角为20px */
border-radius:10px 20px 30px;
/* 左上角为10px，右上角和左下角为20px，右下角为30px */
border-radius:10px 20px 30px 40px; /* 左上角为10px，
右上角为20px，右下角为30px，左下角为40px */
border-top-left-radius: 10px; /* 左上角 */
border-top-right-radius: 10px; /* 右上角 */
border-bottom-right-radius: 10px; /* 右下角 */
border-bottom-left-radius: 10px; /* 左下角 */
边框阴影：box-shadow
box-shadow:5px 3px 2px
盒子属性：
- width，height：盒子的宽和高
- overflow：设置盒子内容超出盒子范围的处理方式：auto(超过时显示滚动条)，hidden(超出时隐藏)，scroll(显示滚动条)
- visible：默认值
- padding(内边距)：left(左边距)，top(上边距)，right(右边距)，bottom(下边距)
- margin(外边距)：left(左边距)，top(上边距)，right(右边距)，bottom(下边距)
- border-sizing: border-box:加入除外边距的，div占据大小不变
- content-box:保证div尺寸固定，不包含内边距和边框线
<div>标签：
相当于块级元素，可以容纳段落、标题、表格、图片等各种HTML元素。
<span>标签：
是一个行内元素，没有任何含义和样式，可以容纳各种HTML元素，
float浮动：
通过设置块级元素的float属性，可以使元素“浮动”;
清除浮动：clear:both；,解决内容坍塌
<ul>
<li><li>
<li><li>
<div style="clear:both"> </div>
</ul>/* 推荐使用 */
.styles:after{
content:'';
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
<ul class="styles">
<li><li>
<li><li>
</ul>
文档流：在HTML里面的写法就是从上到下，从左到右的排版布局。
position（定位）：
- static(静态定位)：文档流，默认值
- relative(相对定位)：不会飘起来，会占用原有位置,参照物是他的上一个元素的位置
- absolute(绝对定位)：理解为飘起来，参照物是已定位的父级元素，会脱离文档流
- fixed(固定定位)：在页面中位置固定
z-index:100;/* z轴的索引，可定位在上层，默认0 */
定位的left和margin-left区别
left世定位的属性，相对于父级元素
margin-left相对于初始位置
display属性：
利用元素的display属性来确定元素的类型，常用的属性值有none、inline和block。
visibility:hidden; ：隐藏，浏览器检查可以看到
overflow:溢出部分处理
字体属性：
- font-family：设置字体
- font-size：字体大小
- font-weight：文字加粗
- font-style:oblique：文字倾斜
- color：文字颜色
- text-decoration(设置下划线)：默认值(none)，加下划线(underline)，文字顶部加下划线(overline)
- text-transform:capitalize：单词首字母大写
- text-transform:lowercase：字母大写
- text-transform:uppercase：字母小写
- letter-spacing：文字间距
- text-align：文字对齐left(左)，right(右)，center(居中)，justify(两端对齐)
- line-height：行高
图像对齐：
img{
vertical-align:-30px
}
背景颜色：
body{
background-color:red; /* 设置整个网页背景颜色 */
}
案例：
<fieldset>
<legend>学生录入系统</legend>
<label for="">姓名:</label>
<input type="text" placeholder="请输入姓名" v-model="user.name" required>
<br>
<label for="">年龄:</label>
<input type="text" placeholder="0" v-model="user.age" required>
<br>
<label for="">性别:</label>
<select v-model="user.sex" required>
<option value="male">男</option>
<option value="female">女</option>
</select>
<br>
<label for="">手机:</label>
<input type="text" placeholder="请输入手机号码" v-model="user.phone">
<br>
<input type="button" value="创建新用户" @click="addUser" required>
</fieldset>动画
div{
/* 兼容性 */
/* 针对于火狐浏览器 */
-moz-transition:；
/* 针对于Safari和GOOGLE */
-webkit-animation:;
/* Opera浏览器 */
-o-animation:;
}过渡
transition:width 2s ease-in 3s,hegiht 3s,back-color ease-out 2s;
transition-delay:2s;/* 延迟 */
transition-timing-sunction: ease-in-out;动画animate
transition和animate的区别
transition只能通过固定的属性来开始与结束
<!-- 先声明动画，在使用 -->
<style>
.div1{
/* 引用动画 */
animate；myAim 5s;
}
@keyframes myAnim{
0%{
width:100px;
height:100px;
background-color:orange;
}
50%{
width:200px;
height:200px;
background-color:blue;
tranform:rotate(45deg);/* 旋转45° */
}
100%{
width:400px;
height:400px;
background-color:red;
}
}
</style>
flex布局
块级元素和行内块级元素
案例（幽灵按钮）：
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body{
background: #666;
}
.btn{
width: 200px;
height: 50px;
background-color: mediumblue;
text-align: center;
line-height: 50px;
position: relative;
}
.btn a{
text-decoration: none;
color: #fff;
font: bold 20px Arial;
}
.btn-border-top, .btn-border-bottom{
height: 5px;
background-color: #fff;
position: absolute;
width: 0;
}
.btn-border-top{
right: 0;
top: 0;
}
.btn-border-bottom{
left: 0;
bottom: 0;
}
.btn:hover .btn-border-top{
transition: .3s;
width: 100%;
background-color: mediumblue;
}
.btn:hover .btn-border-bottom{
transition: .3s;
width: 100%;
background-color: mediumblue;
}
.btn:hover{
background-color: #fff;
}
.btn:hover a{
color: mediumblue;
}
.btn-group{
width: 700px;
display: flex;
justify-content: space-between;
margin: 100px 0 0 100px;
}
</style>
</head>
<body>
<div class="btn-group">
<div class="btn">
<div class="btn-border-top"></div>
<a href="javascirpt:;">HTML5</a>
<div class="btn-border-bottom"></div>
</div>
<div class="btn">
<div class="btn-border-top"></div>
<a href="javascirpt:;">CSS3</a>
<div class="btn-border-bottom"></div>
</div>
<div class="btn">
<div class="btn-border-top"></div>
<a href="javascirpt:;">Javascript</a>
<div class="btn-border-bottom"></div>
</div>
</div>
<script type="text/javascript">
</script>
<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script></body>
</html>
案例:
附代码：
zhuce.html
< html lang="en">
< head >
< meta charset="UTF-8">
< meta http-equiv="X-UA-Compatible" content="IE=edge">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
< title >Document
< link rel="stylesheet" href="csss.css/testcss.css">
< body >
< div class="rg_layout">
< div class="rg_left">
< p >新用户注册
< p >USER REGISTER
< div class="rg_center">
< div class="rg_form">
< form action="#" method="post">
< table >
< tr >
< td class="td_left">< label for="username">用户名
< td class="td_right">< input type="text" name="username" id="username" placeholder="请输入用户名">
< tr >
< td class="td_left">< label for="password">密码
< td class="td_right">< input type="password" name="password" id="password" placeholder="请输入密码">
< tr >
< td class="td_left">< label for="email">Email
< td class="td_right">< input type="email" name="email" id="email" placeholder="请输入邮箱">
< tr >
< td class="td_left">< label for="name">姓名
< td class="td_right">< input type="text" name="name" id="name" placeholder="请输入姓名">
< tr >
< td class="td_left">< label for="tel">手机号
< td class="td_right">< input type="text" name="tel" id="tel" placeholder="请输入手机号">
< tr >
< td class="td_left">< label >性别
< td class="td_right">
< input type="radio" name="gender" value="male" checked> 男
< input type="radio" name="gender" value="female"> 女
< tr >
< td class="td_left">< label for="birthday">出生日期
< td class="td_right">< input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
< tr >
< td class="td_left">< label for="checkcode" >验证码
< td class="td_right">< input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
< img id="img_check" src="img/verify_code.jpg">
< tr >
< td class="td_left">
< td class="td_right">
< input type="submit" id="btn_sub" value="注册" >
< div class="rg_right">
< p >已有账号< a href="#">立即登录
testcss.css
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html{
background: url(../img/VRChat.png) repeat-x;
background-size: cover;
background-attachment: fixed;/* 控制背景图不随内容的滚动而滚动，使其固定大小。 */
}
body{
/* background:#6495ED no-repeat center; */
padding-top:25px;
}
.rg_layout{
/* 包含所有div */
width: 1000px;
height: 500px;
border:8px solid white;
background-color: rgb(100, 115, 250);
border-radius: 10px;
margin: auto;
/* 水平居中 */
}
.rg_left{
/* 第一块 */
float: left;
margin: 15px;
}
.rg_left>p:first-child{
color: rgb(247, 220, 184);
font-size: 20px;
}
.rg_left>p:last-child{
color: rgb(255, 255, 255);
font-size: 20px;
}
.rg_center{
float:left;
margin: 15px;
}
.rg_right{
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right > p a{
color: rgb(240, 69, 69);
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
font-size: 15px;
}
.td_right{
padding-left: 50px;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid white;
border-radius: 6px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
background-color: rgb(244, 218, 115);
width: 150px;
height: 40px;
border: 1px solid rgb(241, 238, 64);
}
/* .rg_form{
} */
浙公网安备 33010602011771号