[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"> & ...
随机推荐
- 分岔 Bifurcations
1. saddle-node bifurcation 2. transcritical bifurcation 3.pitchfork bifurcation 4. Hopf bifurcation ...
- 对15号夏壹队的TD信息通使用体验
对夏壹队的APP的用户使用体验:首先下载的时候看到这个APP的大小是6M多点不算很大感觉还不错,但是占内存不大也说明了一个问题,它不会有很多的功能. 图标是一个蜜蜂,打开后会有一个登陆界面,一开始没有 ...
- java:集合输出之Iterator和ListIterator
在调用Iterator集合输出时,如果想要删除某个元素,请直接使用Iterator来判断元素是否存在然后再删除(next()当前指针内容,remove()删除当前内容 );如果在将集合丢给Iterat ...
- C#中[JsonIgnore]意义
字面意义是忽略序列化,就是当字段在序列化时,被[JsonIgnore]标记了的字段将被忽略序列化 序列化输出中使用Id和Name属性,但我绝对不会对AlternateName和Color感兴趣.我用[ ...
- python+selenium实现发送一封带附件的邮件
163邮件登录首页 登录成功断言是否有退出按钮 点击退出退出登录 from selenium import webdriver import unittest import time class Vi ...
- DNS域名解析系统
1.DNS的组成 DNS系统是为解析域名为IP地址而存在的,它是由域名空间.资源记录.名称服务器和解析器组成. 域名空间是包含一个树状结构,用于存储资源记录的空间. 资源记录是与域名相关的数据,如IP ...
- 如何解决DEDE织梦友情链接字数限制与链接个数限制的问题?
如何解决DEDE织梦友情链接字数限制与链接个数限制的问题!织梦网站非常适合网站搭建以及网站优化,而友情链接是做优化必不可少的模块,我们经常搭建织梦网站发现织梦系统的友情链接模板有时候会限制字数不显示以 ...
- JavaScript变量和字面量
一.什么是变量? 首先了解一下什么是内存:内存就是保存程序在运行过程中,所需要用到的数据8bit(比特是表示信息的最小单位). 8bit=1byte 1024byte=1MB 1024MB=1GB 1 ...
- 解决Eclipse中文字体横着显示的问题
Windows ——> Perference——> General ——> Appearence ——> Colors and Fonts ——> Basic ——> ...
- Elasticsearch的聚合操作
ES的聚合: Metrics 简单的对过滤出来的数据集进行avg,max等操作,是一个单一的数值. bucket 可以理解为将过滤出来的数据集按条件分成多个小数据集,然后Metrics会分别作用在这些 ...