[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"> & ...
随机推荐
- springboot+HttpInvoke 实现RPC调用
开始用springboot2+hession4实现RPC服务时,发现第一个服务可以调用成功,但第二个就一直报 '<' is an unknown code.第一个服务还是可以调用的.参考网上的方 ...
- 超好用的input模糊搜索 jq模糊搜索，
上来先展示效果:默认展示效果: 输入内容: 上代码: css部分: <style type="text/css"> * { padding:; margin:; } h ...
- unkown类型
1,任何类型的值都可以赋给 unkown类型 2. 如果没有类型断言或基于控制流的类型细化时 unknown 不可以赋值给其它类型,此时它只能赋值给 unknown 和 any 类型 3. 如果没有类 ...
- 文本检错——中文拼写检查工具FASPell
最近因为相关项目需要考虑中文文本检错,然后就发现了爱奇艺发布的号称SOTA的FASPell已经开源代码,所以开始着手实现. 检错思想两步:一,掩码语言模型(MLM)产生候选字符:二,CSD过滤候选字符 ...
- visual studio 2017激活
VS2017专业版和企业版激活密钥 Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Professional: KBJFW-NXHK6-W4WJM-CRMQB- ...
- 使用HTML和CSS来实现为文字设置图片底纹
先看一下最终实现的效果 图中的hello是文本而不是图片 那么如何实现这种效果呢? HTML部分: 创建一个h1标签 ,标签内容为(hello).通过link标签链接外部样式表style.css. s ...
- ARC模式下delloc()注意事项
1.ARC模式下delloc()调用触发时机是对象被销毁,如self.属性=nil 2.ARC模式下delloc()里面不需要手动调用[super dealloc]; 因为系统已经自动调用,多此一举的 ...
- sh_07_买苹果增强版
sh_07_买苹果增强版 # 1. 输入苹果的单价 price_str = input("苹果的单价:") # 2. 输入苹果的重量 weight_str = input(&quo ...
- Oracle Or子句
Oracle Or子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,我们来学习如何使用Oracle OR运算符来组合两个或更多的布尔表达式. ...
- 学习日记15-1布局页同时引用多个model
@model Tuple<model1,model2> mvc布局页同时引用多个model 使用m.Item1.xxx m.Item2.xxx