[19/05/19-星期日] CSS_css的声明和选择器
2024-10-07 10:15:46
一、引言
HTML的作用是负责数据的格式展示，如果使用它来搞数据的样式，则发现样式书写出来太麻烦，不易于维护；
HTML可以有效组织数据的展示，但是不同类型数据在浏览器中的分布没有办法展示。
HTML的核心功能就类似于书架，核心就是放置书本，管他外观好看不好看。至于书架的样式可以专门使用CSS来做，当然HTML也可以做，但是太麻烦。
但是注意CSS不能脱离HTML使用
二、基础
CSS：Cascading Style Sheets 层叠样式表。
作用：给网页进行样式的开发，给网页进行布局
特点：语言简单，样式可以重复使用，依赖于HTML
(1)CSS的声明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css的声明学习</title>
<!--声明css的代码域，因为一个网页中有2种语言，要告诉浏览器哪个地方要用css解析 类似于函数使用要先声明或导入jar包
1、在head标签中使用style属性声明 当前网页公共样式 其实在任意位置都行，只是方便阅读
2、在标签中使用的style属性中声明 当前网页的某个特殊标签 只在这个标签有效
3、在head标签使用link标签引入外部声明好的css文件 相当于调用或导入
如果单独写个css文件直接写hr中内容即可 不用写style标签
样式执行顺序：css的样式声明全部写在head标签中
标签距离哪个样式近，标签就使用哪种样式 比如第2个hr 它离引入的外部标签就他就是外部的样式显示的黑色
自定义属性肯定最后执行 -->
<style type="text/css">
hr{ /*在head标签中是公共代码域,如果想要个性 可以在下边使用style属性自定义*/
width: 100px;
height: 10px;
background-color:red;
}
</style>
<link rel="stylesheet" href="mycss.css" /> <!--引入外部css样式-->
</head>
<body>
<h3>css的声明学习</h3>
<hr style="background-color:blue;"/> <!--这里就是使用上边定义好的样式 +自定义的属性 只在这个标签中有效-->
<hr /> </body>
</html>
hr{
width: 100px;
height: 10px;
background-color:black;
}
(2)CSS的选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css的选择器</title>
<style type="text/css">
/*1、标签选择器: 标签名{样式1,样式2....} 作用给网页中的所有标签设置这样的样式
2、id选择器：#id号{单独的样式1，样式2....} 给某个标签加自己的样式
*3、类选择器： .类选择器的名{样式1，....} 解决不同标签使用相同的样式的问题
*4、全部选择器： *{样式1,....} 选择所以的标签并添加相同的样式
*5、组合选择器：如：table, .common{样式1，样式2....} 选择器1，选择器2{ }解决不同选择器中间的重复问题
*6、子标签选择器 选择器1 子标签选择器{样式1，....}
*7、属性选择器 标签名[属性名=属性值]{样式1...} 设置某个标签的某个属性的样式
* 一般：
* 使用4、全部选择器 来给整个页面加样式
* 使用3、类选择器 给不同标签加基础样式
* 使用1、标签选择器 来给某类标签加样式
* 使用2、id选择器 7 属性选择器 或style属性声明给某个标签添加个性化
* 书写样式单：
* 1、边框设置 border:solid(实线) 1px
* 2、字体设置
* 设置大小: font-size:10px; 设置格式 font-family："黑体"
* 设置效果：font-weight：bold(加粗);
* 字体颜色设置 color:颜色;
* 3、背景颜色设置 background-color：颜色
* 背景图片设置 background-img：图片的路径 url
* background-repeate：no-repeate 设置图片不重复
* background-size：cover 图片平铺整个页面
* 4、高和宽
* 浮动设置 float：left|right
* 行高的设置 line-height：10
* */
table{ /*给以下所有的table这样设置*/
width: 300px;
height: 200px;
border: solid 1px;
}
#t1{ /*id选择器*/
background: red;
}
.common{/*类选择器*/
color: blue;
}
ul li a {/*子标签选择器 给所有的类似标签设置样式*/
color: green;
}
#p1{ /*如果不想所以的子标签使用一样的样式 可以设置id 用#id名 单独设置*/
color: yellow;
}
input[type=text]{
background: red;
}
</style>
</head>
<body>
<h3>css的选择器</h3>
<hr />
<table id="t1" class="common">
<tr>
<td>李白</td>
<td>13岁</td>
<td>教师</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table id="t2">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p class="common">css使用</p>
<ul id="u1">
<li ><a href="">哈哈 </a></li>
<li><a href="">嘿嘿 </a></li>
<li><a href="">呵呵 </a></li>
</ul>
<ul id=u2>
<li ><a href="">呵呵 </a></li>
<li><a href="">干嘛 </a></li>
<li><a href="">在洗澡 </a></li>
</ul>
<p id="p1">尼玛</p>
<p id="p2">卧槽</p>
用户：<input type="text" name="uname" value=""/>
密码：<input type="password" name="pwd" value=""/>
</body>
</html>
样式使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css的样式</title>
<style type="text/css">
/*使用标签选择器*/
/*添加网页背景图*/
body{
/*background-image: url(../img/2.jpg);*/
background-size: cover; /*图片平铺*/
/*background: repeat no-repeat;/*设置图片不重复*/ }
table{
border: solid 1px; }
/*设置table表格的行高*/
tr{ /*行*/
height: 40px; }
td{/*单元格*/
width: 120px;
border: solid 1px; /*边框的效果*/
border-radius: 10px; /*设置边框的角度*/
background-color:orange ;
text-align: center; /*文本位置：居中*/
color: palegreen; /*字体颜色*/
font-weight: bold; /*字体效果：加粗*/
letter-spacing: 2px; /*字体之间的距离*/
}
/*菜单的设置 去掉黑点*/
li{
list-style-type:none ; /*去前边的黑点*/ /*display: inline;*/
float: left; /*跟上边的效果一样 设置菜单左悬浮*/
}
li a{
color: black;
text-decoration: none;/*去除文本的下划线*/
font-size: 20px;
margin-left: 20px; /*每个超链接之间设置间距*/
position: relative;
top: 10px;
}
ul{
background-color: orange;
height: 40px;
}
</style>
</head>
<body>
<hr />
<table>
<tr>
<td >姓名</td>
<td>性别</td>
<td>爱好</td>
</tr>
<tr>
<td>王维</td>
<td>男</td>
<td>作文</td>
</tr>
<tr>
<td>李白</td>
<td>男</td>
<td>喝酒</td>
</tr>
</table>
<hr />
<ul>
<li><a href="">首页 </a></li>
<li><a href="">机构设置</a></li>
<li><a href="">领导介绍</a></li>
<li><a href="">校园生活</a></li>
</ul> </body>
</html>
简单照片墙
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 照片墙</title>
<style type="text/css">
img{
width: 15%; /*设置宽度*/ border: solid 1px red;
padding: 10px; /*设置内边距*/
background-color: white;
transform: rotate(-10deg);/*正数:顺时针 负数:逆时针 旋转多少度*/
margin: 20px;
}
body{
text-align: center;
background-color: gray;
}
/*使用伪类标签各图片加样式*/
img:hover{ /*设置鼠标悬停效果 图片转正 图片放大1.5倍 */
border: solid 2px red;
transform: rotate(0deg) scale(1.5);
z-index: 1; /*设置显示优先级别*/
transition: 2s;/*设置图片显示加载的时间*/
}
</style>
</head>
<body>
<img src="../img/chen (1).jpg" alt="" />
<img src="../img/chen (2).jpg" alt="" />
<img src="../img/chen (3).jpg" alt="" />
<img src="../img/chen (4).jpg" alt="" /> <br />
<img src="../img/chen (5).jpg" alt="" />
<img src="../img/chen (6).jpg" alt="" />
<img src="../img/chen (7).jpg" alt="" />
<img src="../img/chen (8).jpg" alt="" />
</body>
</html>
CSS
最新文章
- [Python] Python学习笔记之常用模块总结[持续更新...]
- cookie禁用了，session还能用吗？
- 与TableView插入、删除、移动、多选，刷新控件
- 规范化注释 VVDocumenter的使用方法
- Validform表单验证总结
- hdoj 1874 畅通工程续
- android媒体文件扫描
- js中cookie操作
- SSH连接时出现「WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!」解决办法
- JAVA环境变量关于
- 关于父窗口获取跨域iframe子窗口中的元素
- 软件性能测试技术树（三）----数据库（MySQL）性能
- javascript入门篇（二）
- oss对象云存储
- 浅谈nodejs和php
- 使用tcpdump探测TCP/IP三次握手
- 基于vue与vux做的可滑动tab组件（附源码）
- Android Studio调试时遇见Install Repository and sync project的问题
- M1-SaltStack&Flask-Day4
- 云卡门禁安卓SDK_BLEDOOR_SDK_ANDROID_2016_12_15