css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关：
使用link链入外部样式，页面加载时会同时加载样式
@import url(“*.css”);使用导入式，页面加载完后，才会加载样式
链接伪类的顺序
:link-> :visited ->:hover-> :active
或者
: visited -> : link ->:hover-> :active
选择器的优先级：
id选择器>class选择器>标签选择器
如果设置了同样的类样式，类样式与元素里类的顺序没有关系，取决于哪个样式离需要引用样式的元素最近就用哪个，所以div里的文字颜色是“橘色“
选择器权值：
标签选择器：1
类和伪类选择器：10
id选择器：100
通配符选择器：0
行内样式：1000
!important：优先级最最高
权值不同时，根据权值判断样式；权值相同时，根据就近原则判断样式
常用选择器：
input:focus
p:first-letter p元素的首字母
p:first-line p元素的首行
serif字体和sans-serif字体的区别：
sans-serif有修饰
sans-serif无修饰
font-style:normal/italic/oblique
正常 斜体 倾斜
font简写顺序： font-style font-variant font-weight font-size font-family；
img水平居中：
img不是块级元素，不能使用img{text-align:center;}
可以在img外面包裹div，使用div{text-align:center;}
margin:0 auto也可以实现
vertical-align可以设置数值
单行文字水平垂直居中：
height与Line-height相同，text-align:center;
多行文字水平垂直居中：
多行文字设置margin:0 auto；
文字外容器设置：display:table-cell;vertical-align:middle;
文字外容器的外容器设置：display:table;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style type="text/css">
*{padding:0px;margin: 0px;} .warp1{
height:80px;
width: 100%;
background-color: #14191e;
line-height:80px;
text-align:center;
} .warp1 h1{
color:#fff;
font-size:24px; } .warp2{
height:400px;
width: 100%;
border:1px #14191e solid;
display:table;
} .content{
display:table-cell;
vertical-align:middle;
} .content p{
width:500px;
font-family: "微软雅黑";
line-height:1.5em;
font-size:14px;
margin:0 auto;
} </style>
</head>
<body>
<div class="warp1">
<h1>CSS vertical-align 属性</h1>
</div>
<div class="warp2">
<div class="content">
<p>vertical-align 属性设置元素的垂直对齐方式</p>
<p>该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。</p>
</div>
</div> </body>
</html>
文本大小写：
text-transform：capitalize/uppercase/lowercase/none
文本装饰线：
text-decoration: underline/overline/line-through
文本样式应用demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style type="text/css">
*{padding:0px;margin: 0px;} .wrap{
height:200px;
line-height:200px;
width:100%;
text-align:center;
background-color: #abcdef;
font-family: "宋体";
}
span.words{
font-size: 28px;
color: gray;
text-decoration: underline;
letter-spacing: 5px;
margin-left: 10px;
vertical-align: 12px;
}
span.name{
color:red;
font-size: 60px;
letter-spacing: 10px;
text-transform:uppercase;
}
span.mark{
font-style: italic;
color: gray;
font-weight: bold;
font-size: 60px;
} </style>
</head>
<body>
<div class="wrap">
<span class="name">cyy</span><span class="words">你会越来越棒棒</span><span class="mark">！</span>
</div> </body>
</html>
文本样式demo2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style type="text/css">
*{padding:0px;margin: 0px;} .wrap{
height: 100px;
line-height: 34px;
width: 100%;
padding-left:10px;
}
hr{
margin:10px 0;
}
h3{
color:green;
margin: 10px 0;
}
a{
text-decoration: none;
color:#009;
}
span{
color:orange;
}
</style>
</head>
<body>
<div class="wrap">
<h3>大话西游之大圣娶亲的影评</h3>
<a href="#">热门</a>/<a href="#">最新</a>/<a href="#">好友</a>
<hr>
<p><a href="#">罗红霉素</a><span>★★★★★</span>2019-07-26</p>
<p>有人跟我比赛背台词么</p>
<p>阅读：1615 <a href="#">有用</a></p>
<hr>
<p><a href="#">十七只猫和鱼</a><span>★★★★</span>2019-04-26</p>
<p>任何时候任何场合都可以再看一遍的电影</p>
<p>阅读：515 <a href="#">有用</a></p>
<hr>
<p><a href="#">暖家男</a><span>★★★★</span>2019-04-22</p>
<p>一定有一些电影，永远都不能被超越</p>
<p>阅读：490 <a href="#">有用</a></p>
<hr>
</div> </body>
</html>
css基础-css选择器和css文本样式相关的更多相关文章
- HTML&CSS基础-属性选择器
HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- CSS基础和选择器
什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...
- CSS 基础 优先级 选择器 继承
1.样式优先级 (内联样式)Inline style > (内部样式)Internal style sheet > (外部样式)External style ...
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- CSS基础--属性选择器、伪类选择器
属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- CSS中常见的6种文本样式
前面的话 CSS文本样式是相对于内容进行的样式修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个 ...
- HTML&CSS基础学习笔记1.12—引入样式表
引入样式表 我么都知道HTML是网页内容的载体,CSS样式是表现,就像网页的外衣.如何让网页披上这层外衣呢? 这个时候就需要用<link>标签了,它起到将CSS样式链入页面的作用. < ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
随机推荐
- C++ 对TXT 的串并行读写
任务说明:有36篇文档,现在要读入,并统计词频,字典长度25,希望能够比较串并行读写操作的时间差距. 串行读入并统计词频 // LoadDocsInUbuntu.cpp // #include < ...
- Spring Cloud中Eureka注册显示UNKNOWN问题
这是由于application.yml里spring没有配置实例造成的
- C++ 函数详解
C++函数完全兼容C函数定义的风格,但是也做出了一些改进.一方面,C++函数允许使用缺省参数值和占位参数:另一方面,C++提供了重要的函数重载机制:另外,为了解决C中臭名昭著的宏缺陷问题,C++提供了 ...
- 办公环境下k8s网络互通方案
在 kubernetes 的网络模型中,基于官方默认的 CNI 网络插件 Flannel,这种 Overlay Network(覆盖网络)可以轻松的实现 pod 间网络的互通.当我们把基于 sprin ...
- 深入理解JVM-类加载及类加载器
深入理解JVM 2020年02月06日22:43:09 - 记录学习过程 终于开始了.在学习这个之前,看了zhanglong老师的 java 8 和springboot 迫不及待了.先开始吧. 写在前 ...
- Ops：jar包启动关闭脚本
简介 公司开发架构为java语言的rpc dubbo架构,将功能分解为各个模块,模块较多,发布到环境上的应用为编译后的jar包和配置文件,以及启动关闭jar包的shell脚本.之前经常会出现进程启动不 ...
- 使用Redis需要注意的几点
Redis作为缓存中间件,被广泛应用在各类系统,用来提升系统性能和吞吐,下面总结几点开发人员在使用Redis时需要考虑的几个关键点: 一. key的设计 1. key命名规范:为了避免不必要的麻烦,我 ...
- Uncaught Error: Call to undefined function mcrypt_get_iv_size() 解决办法
函数 mcrypt_get_iv_size 在只在(PHP 4 >= 4.0.2, PHP 5, PHP 7 < 7.2.0, PECL mcrypt >= 1.0.0) 这几个版本 ...
- NodeJS 介绍安装
1.NodeJS简介 Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎进行了封装,它主要用于创建快速的.可扩展的网络应用.N ...
- 使用Java, AppleScript对晓黑板进行自动打卡
使用Java, AppleScript对晓黑板进行自动打卡 由于我们学校要求每天7点起床打卡,但是实在做不到,遂写了这个脚本. 绪论 由于晓黑板不支持网页版,只能使用App进行打卡,所以我使用网易的安 ...