0428css样式
CSS样式表
|-引入的三种方式
|--内联样式
|----标签内部(空格style)
|--内嵌样式
|----<head></head>标签内部(<style></style>)
|--外联样式
|----<link rel="stylesheet(样式表)" type="text/css" href="css文件路径"/>
<!--外联样式(link:联系)-->
<link rel="stylesheet" type="text/css" href=""/>
<!--内嵌(style:风格、样式)-->
<style type="text/css">
<!--内联-->
<div style=""></div>
|-选择器(查找方式)
|--id 唯一、通过 # 查找
|--class 可以重名、通过 . 查找
|--<标签名> 通过 <标签名> 查找(<div>/<span>:控制所有div/span标签)
|--并列选择 通过 , 查找(可并列控制不同类型:id,class,<div>,<span>)
|--后代选择 通过 空格 查找(只控制后代的样式)
/*井号#代表id*/
#weiyi{}/*选择id="weiyi"的元素*/
/*.代表class*/
.kechongming{}/*选择所有class="kechongming"的元素*/
/*通过标签名直接控制*/
div{}/*选择所有div*/
span{}/*选择所有span*/
/*并列选择,元素之间加 , */
#weiyi,.kechongming,div,class,span{}
/*空格 选择后代*/
#houdai div{}/*选择id="houdai"的元素中的所有div*/
.houdai_ span{}/*选择所有class="houdai_"的元素中的所有span*/
<!--选择器-->
<div id="weiyi"></div>
<div class="kechongming"></div>
<div class="kechongming"></div>
<div class="kechongming"></div>
<div id="houdai">
<div></div>
<div></div>
<span></span>
<span></span>
</div>
|-样式
|-大小 width:宽度 height 高度
|-背景 background-color 颜色
|-背景图片
|--background-image:url("") 图片路径
|--background-size: 图片尺寸
|--background-repeat:no-repeat 删除默认平铺
/*样式 大小与背景*/
#beijingtupian{
margin-top:10px ;
width: 200px;
height: 200px;
border: 1px solid red;
background-image: url(../../xiaomi/disanhanggundong.png);
background-size: 150px,100px;/*背景尺寸*/
background-repeat:no-repeat ;/*背景平铺方式*/
}
<!--样式-->
<!--大小与背景-->
<div style="width: 200px; height: 200px; background-color: green;"></div>
<div id="beijingtupian"></div>

|-字体(font 文字)
|--字体的样式 font-family(微软雅黑、宋体、楷体等)
|--字体的大小 font-size
|--字体的格式 font-style
|--字体的粗细 font-weight
|--字体的颜色 color
|--给字体加线 text-decration:
/*字体样式*/
span{
font-family: "微软雅黑";
font-size:16px;
font-style: italic;/*字体倾斜*/
font-weight: bolder;/*字体加粗*/
text-decoration: line-through;/*删除线(through:穿过)*/
color: orange;
}
<!--字体的样式-->
<span>字体的样式</span>

0428css样式的更多相关文章
- 0428-css样式
一.CSS样式表 引入的三种方式1.内联样式:标签内部 style2.内嵌样式:<head></head>标签内部(<style></sty ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- BootStrap_02之全局样式及组件
1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③P ...
- CSS 选择器及各样式引用方式
Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...
- x:bind不支持样式文件 或 此Xaml文件必须又代码隐藏类才能使用{x:Bind} 解决办法
这两天学习UWP开发,发现一个很有趣的问题,就是我题目中的描述的. 我习惯了在ResourceDictionary中写样式文件,但是发现用x:Bind时会有问题 如果是写在Style里,则提示 “x: ...
- input[tyle="file"]样式修改及上传文件名显示
默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...
- WPF样式之画刷结合样式
第一种画刷,渐变画刷GradientBrush (拿线性渐变画刷LinearGradientBrush(其实它涵盖在GradientBrush画刷内.现在拿他来说事.),还有一个圆心渐变画刷Radia ...
- JavaScript特性(attribute)、属性(property)和样式(style)
最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相 ...
- 邮件中嵌入html中要注意的样式
工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则: 1.邮件使用table+css布局 2.邮件主要部分在 ...
随机推荐
- 项目实战15—企业级堡垒机 jumpserver
本文收录在Linux运维企业架构实战系列 环境准备 系统:CentOS 7 IP:192.168.10.101 关闭selinux 和防火墙 # CentOS $ setenforce # 可以设置配 ...
- python基础——匿名函数及递归函数
python基础--匿名函数及递归函数 1 匿名函数语法 匿名函数lambda x: x * x实际上就是: def f(x): return x * x 关键字lambda表示匿名函数,冒号前面的x ...
- Linux服务器SSH无法通过DSA证书登录的解决方法
从openssh7.0开始,ssh-dss密钥被默认禁用. 修改服务器端的openssh设置重新开启 # vim /etc/sshd/sshd_config添加以下选项PubkeyAcceptedKe ...
- Python将excel文件从xls转换为xlsx
本文使用场景:将一个xls格式Excel文件转换为xlsx文件格式.接下来将一步一步演示该操作.你也可以对代码进行修改使其适用于你所需的场景. 安装Python3 首先需要安装Python,我这里安装 ...
- Sevrlet 工作原理解析-转
从 Servlet 容器说起 要介绍 Servlet 必须要先把 Servlet 容器说清楚,Servlet 与 Servlet 容器的关系有点像枪和子弹的关系,枪是为子弹而生,而子弹又让枪有了杀伤力 ...
- 对于IO流的个人理解
Samuel 2018-04-21 在这之前,我给你们构造这样一个生活用水的场景: 人们日常生活需要生活用水,那么,水从哪里来呢? 大家都学过初中的物理常识,水在地表,通过蒸发,变成水蒸气去到空中,在 ...
- 生成和配置https证书
最近在做小程序,调用后台接口需要https协议请求,小程序之所以这么要求,也是因为http协议是明文传播文件数据的,出于数据安全考虑,必须使用https协议. http想实现为https 就需要为配置 ...
- [NOIp 2014]联合权值
Description 无向连通图G 有n 个点,n - 1 条边.点从1 到n 依次编号,编号为 i 的点的权值为W i ,每条边的长度均为1 .图上两点( u , v ) 的距离定义为u 点到v ...
- bzoj 1558: [JSOI2009]等差数列
Description Solution 把原数组变为差分数组,然后剩下的就十分显然了 区间查询用线段树维护 修改操作就是区间加法和两个单点修改 一个等差数列实际上就是 开头一个数字+数值相等的一段 ...
- [bzoj5016][Snoi2017]一个简单的询问
来自FallDream的博客,未经允许,请勿转载,谢谢. 给你一个长度为N的序列ai,1≤i≤N和q组询问,每组询问读入l1,r1,l2,r2,需输出 get(l,r,x)表示计算区间[l,r]中 ...