CSS 四种样式表 六种规则选择器 五种常用样式属性
新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页
后面的代码都是在html文件中编写的
CSS的四种样式表:1.内联样式表
<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><p style="color:red">这是一个p标签</p></body></html>
CSS的四种样式表:2.嵌入样式表
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">p{background-color:green;}</style></head><body><p>这是一个p标签</p></body></html>
CSS的四种样式表:3.外部样式表
CSS文件内容（文件名style.css）
p{color:red}
html引用CSS
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="StyleSheet1.css" type="text/css"/></head><body><p>这是一个p标签</p></body></html>
CSS的四种样式表:4.输入样式表
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">@import url("StyleSheet1.css");</style></head><body><p>这是一个p标签</p></body></html>
CSS样式规则的选择器:HTML Selector
可以同时对同一类标签进行设置 但是无法对单个标签进行设置
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">p{background-color:green;}</style></head><body><p>这是一个p标签</p></body></html>
CSS样式规则的选择器:Class Selector
可以对单个标签进行设置也可以对多个标签进行,需要设置class的值.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">p.P1{background-color: blue;}p.P2{background-color: red;}p.P3{background-color: green;}</style></head><body><p class="P1">这是一个p标签</p><p class="P2">这是一个p标签</p><p class="P3">这是一个p标签</p><p class="P3">这是一个p标签</p><p>这是一个p标签</p></body></html>
CSS样式规则的选择器:ID Selector
可以对单个标签进行设置也可以对多个标签进行,需要设置id的值.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">#P1{background-color: green;}#P2{background-color: red;}#P3{background-color: blue;}</style></head><body><p id="P1">这是一个p标签</p><p id="P2">这是一个p标签</p><p id="P3">这是一个p标签</p><p id="P3">这是一个p标签</p><p>这是一个p标签</p></body></html>
CSS样式规则的选择器:关联选择器
添加em为特殊关键字,使用HTML Selector 进行设置
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">p em{background-color: green;}</style></head><body><p><em>这是一个p标签</em></p><p><em>这是一个p标签</em></p><p>这是一个p标签</p><p>这是一个p标签</p></body></html>
CSS样式规则的选择器:组合选择器
在HTML Selector 基础上同时对多种标签进行设置
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">p,div,span{background-color: blue;}</style></head><body><p>这是一个p标签</p><p>这是一个p标签</p><div>这是一个div标签</div><div>这是一个div标签</div><span>这是一个Span标签</span><span>这是一个Span标签</span></body></html>
CSS样式规则的选择器:伪元素选择器
大多数时候用于超链接文本
常用伪标签
active 选中超链接的状态
hover 光标移动到超链接上的状态
link 超连接的正常状态
visited 访问过得超链接状态
first-line 段落中的第一行文本
first-letter 段落中的第一个字母
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">a:active{background-color: blue;}</style></head><body><a href="http://www.baidu.com">百度</a><a href="#">天猫</a><a href="123">淘宝</a><a href="222">京东</a></body></html>
CSS样式属性:字体
Font-family 设置字体
Font-size 设置文字大小,绝对大小 设置xx-small、x-small、small、medium、large、x-large、xx-large
font-style 设置字体样式 Normal Itlic 或者 Oblique(斜体)
text-decoration 设置在文本中条件下划线、上划线、中划线、闪烁效果
font-weight 设置粗体字磅值normal、bold、bolder、lighter、100-900
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">p{font-family: 'MS UI Gothic';font-size:large;font-style: italic;text-decoration: blink;font-weight:lighter;}</style></head><body><p>这是一个p标签</p></body></html>
CSS样式属性:背景
background-color 设置元素的背景色
background-image 设置元素的背景图像
background-repeat 设置背景图像是否重复出现
repeat 在水平和垂直上垂直 repeat-x 水平方向上重复 repeat-y 垂直方向上重复
backgroung-attachment 设置背景图像是否跟随内容滚动 fixed sroll
background-position 设置背景图像的水平位置和垂直位置水平:left、center、right.垂直:top、center、buttom.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">p{background-color: red;background-image: url(image/2.png);background-repeat: repeat-x;background-attachment: local;background-position: left;}</style></head><body><p>这是一个p标签</p></body></html>
CSS样式属性:文本
word-spacing 设置单词之间的间距
letter-spacing 设置字符之间的间距
text-align 设置文本的水平对齐方式 left、right、center、justfy
text-indent 设置第一行文本的缩进值
line-height 设置文本所在行高
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">p{word-spacing: 24px;letter-spacing: 10px;text-align: right;text-indent:10px;line-height:20px;}</style></head><body><p>这是 一个 p 标签</p><p>这是 一个 p 标签</p><p>这是 一个 p 标签</p></body></html>
CSS样式属性:位置
position 设置对象的定位方式 absolute绝对定位、relative相对定位、static无特殊定位
left 设置元素的左边水平位置
top 设置元素的顶部垂直位置
width 设置元素显示的宽度
height 设置元素显示的高度z-index 使用定位后
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">p{position:relative;left:20px;top:20px;width:10px;height:30px;z-index:5;}</style></head><body><p>这是 一个 p 标签</p><p>这是 一个 p 标签</p><p>这是 一个 p 标签</p></body></html>
CSS样式属性:边缘
margin 设置元素的边界与其他元素的空隙大小
margin-top 设置元素上边界与其他元素之间的空隙大小
margin-right 设置元素的右边界与其他元素之间的空隙大小
margin-bottom 设置元素的下边界与其他元素之间的空隙大小
margin-left 设置元素的左边界与其他元素之间的空隙大小
padding 设置元素边界与内部内容之间的空隙大小
padding -top 设置元素上边界与内部内容之间的空隙大小
padding -right 设置元素的右边界与内部内容之间的空隙大小
padding-bottom 设置元素的下边界与内部内容之间的空隙大小
padding -left 设置元素的左边界与内部内容之间的空隙大小
width 设置元素边框的宽度 thin细、medium中、thick粗
border-top-width 设置元素上边框宽度
border-right-width 设置元素右边框宽度
border-left-width 设置元素左边框宽度
border-bottom-width 设置元素下边框宽度
color 设置元素边框颜色
border-top-color 设置元素上边框颜色
border-right-color 设置元素右边框颜色
border-left-color 设置元素左边框颜色
border-bottom-color 设置元素下边框颜色
style 设置元素边框的样式 none无、dotted点线、dashed虚线、solid实线、double双线、groove凹槽、ridge凸槽、inser凸边、outset凹边
CSS 四种样式表 六种规则选择器 五种常用样式属性的更多相关文章
- web前端篇：CSS使用，样式表特征，选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- css——样式表分类，选择器
一,样式表分类 (1)内联样式[优先级最高][常用][代码重复使用性最差] (当特殊的样式需要应用到个别元素时,就可以使用内联样式. 使用内联样式的方法是在相关的标签中使用样式属性.样式属性可以包含任 ...
- css样式表---样式表分类、选择器
一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...
- 前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...
- css样式表分类、选择器分类、css基础样式
1 . 样式表 Cascading Style Sheet css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省 ...
- 【3-24】css样式表分类、选择器、样式属性
一.css样式表分类: (一)内联样式表:代码写在标签内的样式表 控制精确 代码重用性差 优先级最高 格式:<p style="样式属性">内容</p> ...
- CSS样式表——格式与选择器
1.分类 1)内联(写在标签内部) style="样式" 控制精确,代码重用性差 2)内嵌(在<head></head>中) <style type= ...
- CSS总结div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
- CSS：CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
随机推荐
- .Net RabbitMQ实战指南——进阶(二)
持久化 持久化可以提高RabbitMQ的可靠性,防止异常情况下的数据丢失.RabbitMQ的持久化分为三个部分:交换器的持久化.队列的持久化和消息的持久化. 交换器的持久化通过声明队列时将durabl ...
- 【NX二次开发】NX内部函数，pskernel.dll文件中的内部函数
pskernel.dll文件中的内部函数,含有部分pk函数,用法可以查看pk函数帮助: ADPAPE ADVXED APPTRA ATGETO ATTGEO BLECHK BLECRB BLECVR ...
- 使用charles抓取https的方法
自己整理的步骤做个记录 1.下载证书,官方地址:http://www.charlesproxy.com/ssl.zip 可直接点击链接下载:http://charlesproxy.com/getssl ...
- 【Azure 机器人】微软Azure Bot 编辑器系列(5) : 机器人的卡片式回复 (The Bot Framework Composer tutorials)
欢迎来到微软机器人编辑器使用教程,从这里开始,创建一个简单的机器人. 在该系列文章中,每一篇都将通过添加更多的功能来构建机器人.当完成教程中的全部内容后,你将成功的创建一个天气机器人(Weather ...
- 还在担心写的一手烂SQL，送你4款工具
对于正在运行的mysql,性能如何,参数设置的是否合理,账号设置的是否存在安全隐患,你是否了然于胸呢? 俗话说工欲善其事,必先利其器,定期对你的MYSQL数据库进行一个体检,是保证数据库安全运行的重要 ...
- NOIP模拟测试28「阴阳·虎·山洞」
写这几个题解我觉得我就像在按照官方题解抄一样 阴阳 题解 将题目中给的阴阳看作黑色和白色 首先我们观察到最后生成图中某种颜色必须是竖着单调递增或竖着单调递减 类似这样 否则不满足这个条件 但合法染色方 ...
- Spring Cloud Data Flow整合Cloudfoundry UAA服务做权限控制
我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 前言 关于Spring Cloud Data Flow这里不多介绍,有兴趣可以看下面的文章.本文主要介绍如何整合Dat ...
- 20204107 孙嘉临《Python程序设计》实验三报告
课程:<Python程序设计>班级: 2041姓名: 孙嘉临学号: 20204107实验教师:王志强实验日期:2020年5月24日必修/选修: 公选课## 1.实验内容创建服务端和客户端, ...
- 『动善时』JMeter基础 — 51、使用JMeter测试WebService接口
目录 1.什么是WebService 2.WebService和SOAP的关系 3.什么是WSDL 4.测试WebService接口前的准备 (1)如何判断是WebService接口 (2)如何获取W ...
- Unity的AnimationCurve
转自:风宇冲Unity3D教程学院http://blog.sina.com.cn/s/blog_471132920101f8nv.html,本文有多处增删减改,详细内容请查看原文. 1.介绍 Anim ...