[19/05/19-星期日] CSS_css的声明和选择器
一、引言
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
[19/05/19-星期日] CSS_css的声明和选择器的更多相关文章
- [19/05/20-星期一] CSS_css的盒子模型
一.盒子模型 <!DOCTYPE html> <html> <!-- div 标签 块级标签 主要用来网页布局, 会将其中的子元素内容作为一个独立的整体存在 默认宽度是页 ...
- [19/05/16-星期四] HTML_body标签(表格标签)
一.概念 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- Power Strings 分类： POJ 串 2015-07-31 19:05 8人阅读 评论(0) 收藏
Time Limit:3000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status Practice POJ ...
- android开发之this.finish()的使用 分类： android 学习笔记 2015-07-18 19:05 30人阅读 评论(0) 收藏
在一个Activity用完之后应该将之finish掉,但是,之前在学校里自己摸索着开发时并没有太注意这个问题,因为activity无论是否finish掉对功能的影响貌似都不是那么明显(这是读书时候的观 ...
- 【转载】Spring学习(1)——快速入门--2019.05.19
原文地址:https://www.cnblogs.com/wmyskxz/p/8820371.html 认识 Spring 框架 Spring 框架是 Java 应用最广的框架,它的成功来源于理念 ...
- [19/05/29-星期三] JavaScript_ 函数的简介
一.函数的简介 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- [19/05/27-星期一] JavaScript_ 条件语句(if语句)和循环语句(while 、for、do-while)
一.条件语句 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- [19/05/25-星期六] JavaScript_ 基础知识和基本语法_数据类型
一.概念 诞生于1995年,刚开始主要用于处理网页中的前端验证(指的是检查用户输入的内容是否符合一定的规则,比如用户名的长度.密码的长度.邮箱格式等). 前身是网景公司的LiveScript语言,傍的 ...
- [19/05/18-星期六] HTML_form标签
一.form标签(一) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
随机推荐
- python笔记（3）---列表
lst = ["bob","jack","马云","马化腾","王健林"] del lst[1:3] ...
- 前端之JavaScript：JS之DOM对象三
js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for ...
- 题解 P1587 【[NOI2016]循环之美】
知识点:莫比乌斯反演 积性函数 杜教筛 废话前言: 我是古明地恋,写这篇题解的人已经被我 请各位读者自行无视搞事的恋恋带有删除线的内容,谢谢茄子. 这道题目本身并不难,但是公式推导/代码过程中具有迷惑 ...
- luogu 4147 玉蟾宫 悬线DP
Code: #include<bits/stdc++.h> using namespace std; #define setIO(s) freopen(s".in",& ...
- #452 Div2 Problem C Dividing the numbers ( 思维 || 构造 )
题意 : 将从 1 ~ n 的数分成两组,要求两组和的差值尽可能小,并输出其中一组的具体选数情况 分析 : 如果将这 n 个数从大到小四个一组来进行选择的话那么差值就为 0 ,然后再来考虑 n%4 ! ...
- HDU 6206 Apple ( 高精度 && 计算几何 && 三点构圆求圆心半径 )
题意 : 给出四个点,问你第四个点是否在前三个点构成的圆内,若在圆外输出"Accepted",否则输出"Rejected",题目保证前三个点不在一条直线上. 分 ...
- [luogu]P1053 篝火晚会[数学][群论]
[luogu]P1053 篝火晚会 题目描述 佳佳刚进高中,在军训的时候,由于佳佳吃苦耐劳,很快得到了教官的赏识,成为了“小教官”.在军训结束的那天晚上,佳佳被命令组织同学们进行篝火晚会.一共有n个同 ...
- 小波神经网络（WNN）
人工神经网络(ANN) 是对人脑若干基本特性通过数学方法进行的抽象和模拟,是一种模仿人脑结构及其功能的非线性信息处理系统. 具有较强的非线性逼近功能和自学习.自适应.并行处理的特点,具有良好的容错能力 ...
- 在Python中，如何将一个字符串数组转换成整型数组
https://blog.csdn.net/xiangchengguan/article/details/78987041 arr = ['] arr = list(map(int,arr)) pri ...
- PS4 Submission
第一部分是param.sfo文件的设置: 另外,sce_sys目录下的icon0.png文件和pic1.png文件也可以手动修改成自己需要的样式,前者是在游戏中的logo,图片要求是512x512,p ...