CSS基本内容
CSS样式表的三种引入方式:
1、外部样式表——即将CSS样式写在单独的一个.css文件中:
<link rel="stylesheet" type="text/css" href="./css/custom.css" />
2、内部样式表:
<style type="text/css">
h1{
color: red
}
</style>
3、内联样式表:
<h1 style="color: gold">标题</h1>
一个样式中,如果包含多个属性,则用分号隔开:
#container{
width: 100%;
height: 735px;
background-color: #f4f4f4;
}
还可以多个样式使用同一个属性:
h1, a, h2{
color: red;
}
继承(故称样式层叠表):
一个标签内的所有元素都会继承该标签的样式,例如:
/*1、body内的text会变红,h1标签的text也会变红,a标签、h2标签以及其他所有标签的text都会变红。
2、但是样式的继承会存在覆盖:例如,body标签中有一个h1标签,那么h1的样式会覆盖掉body的样式。*/
body{
color: black;
}
选择器:
1、派生选择器:
/*样式设置:*/
/*也就是先选择li标签,此时再选择,肯定就是选择li标签的strong标签,而不是其他地方的strong标签;
所以li的strong标签变红了,p的strong没变*/
li strong{
color: red;
} <!--效果测试-->
<p><strong>p的strong标签</strong></p>
<ul>
<li><strong>li的strong标签</strong></li>
</ul>
2、id选择器(用#表示):
<style type="text/css">
#id{
color: red;
}
</style> <divid="id">id选择器</div>
派生选择器和id选择器的联合使用:
<style type="text/css">
/*就是说:在id="id"的标签下,设置a标签的样式*/
#id a{
color: red;
}
</style> <div id="id"><a>联合使用</a></div>
3、类选择器:
以一个点来表示:
<style type="text/css">
.class{
color: red;
}
</style> <div class="class"><a>类选择器</a></div>
与派生选择器联合使用(或者说,通过派生的方式来选择):
<style type="text/css">
.class a{
color: red;
}
</style> <div class="class"><a>通过类选择器,来派生选择</a></div>
4、属性选择器:
设置指定了/拥有某个属性的标签的样式,通过[]来表示:
<style type="text/css">
[title]{
color: red;
}
</style> <div title="div">属性选择器</div>
更具体的选择:属性和值选择器:
<style type="text/css">
[title=value]{
color: red;
}
</style> <div title="value">属性和值选择器</div>
<div title="div">属性选择器</div>
背景方面:
CSS设置标签的背景图片、背景颜色:
<style type="text/css">
body{
background-image: url("1.png");
background-color: black;
}
</style>
设置背景图片的重复情况:
/*例如*/
background-repeat: no-repeat;
设置背景图片显示的位置:
/*这里有三种方式:属性值的形式是(x,y);第三种的y坐标好像是向上为正*/
/*background-position: right top;*/
/*background-position: 100px 100px;*/
background-position: 0% 0%;
设置背景图片是否跟随页面的滚动而滚动:
/*设置成fixed就不会跟随滚动,其他就会跟随(测试的时候,选择一张尺寸较小的图片,并且不要重复)*/
background-attachment: fixed;
文本方面:
设置文本的大小写:
p{
text-transform: capitalize;
}
文本的阴影效果:
h1{
/*参数1、2是阴影相对于原文本的坐标值(x,y),参数3是阴影的清晰度——阴影都是这样弄的*/
text-shadow: 2px 2px 1px #FF0000;
} <h1>text的效果</h1>
文本自动换行(normal不会将单词拆分,但是word-wrap的break-word会拆分):
#test{
width: 100px;
/*text-wrap: normal;*/ /*deprecate*/
word-wrap: normal;
} <p id="test">hello world hello world </p>
a链接的四种状态及使用:
/*测试的时候,最好清除浏览数据,不然可能看不到link的效果*/
a:link {
/*初始状态:从未被点击*/
color: black;
}
a:visited{
/*被点击过后(未清除浏览数据),再次浏览该页面显示的状态*/
color: red;
}
a:hover{
/*鼠标放在a连接上,不点击*/
color: gold;
}
a:active{
/*鼠标单击a链接不松开:正在被点击的时刻*/
color: white;
} <!--如果没有href属性,是无法看到visited的效果的,因为没有进行访问(visit)-->
<a href="http://www.baidu.com">点击测试</a>
去掉a链接的下划线:
a{
text-decoration: none;
} <a href="http://www.baidu.com">点击测试</a>
CSS基本内容的更多相关文章
- Python开发【第十篇】:CSS --无内容点击-不进去(一)
Python开发[第十篇]:CSS --无内容点击-不进去(一)
- 使用CSS为内容设定特定的鼠标样式(cursor)介绍
相信大家都知道我们的鼠标在网页中不同的元素中有不同的显示(例如 a 元素就显示为“箭头指针”),但是其实我们还可以自定义这些有趣的东西哦!今天“畅想资源”就来教大家如何使用CSS为内容设定特定的鼠标样 ...
- css基础内容
css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离 ...
- div+css隐藏内容样式方法
div css隐藏内容样式方法 div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...
- CSS进阶内容—盒子和阴影详解
CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- CSS进阶内容——布局技巧和细节修饰
CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...
- 使用CSS使内容垂直居中的N中方法。
使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论. 1.当待垂直居中的DIV高宽为已知时: ...
- CSS生成内容
在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现.但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”.“ ...
- CSS应用内容补充及小实例
一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
随机推荐
- Robot Framework 自动化测试--部署篇
一.产品介绍 Robot Framework是一个基于Python的,可扩展的关键字驱动的测试自动化框架.它是为了端 到端的验收测试(End-To-End Acceptance Test)以及验收测试 ...
- 【shell脚本】通过遍历文件的一种批量执行shell命令的方法。
在分析数据时,经常会有许多机械重复的命令带入,作为一个半路出家的程序猿,我曾经对这种工作束手无策.不像一个熟手那样举重若轻的分析,感觉自己的生信分析完全是个体力活.为了打开这样的局面,我开始学习如何批 ...
- 相关Linux命令
#若服务不小心开启但是想关闭时,可以使用这个 命令:adstrtal.sh apps/apps(脚本 数据库用户名/密码) 若想启动命令:adstrtal.sh apps/apps ———————— ...
- awk中截取IP字段
由于文本的特殊性,IP字段可能并不是在特定的字段中. 借助awk的match()函数进行匹配截取 awk --re-interval '($0 ~ "xxx"){match($0, ...
- JDK源码之HashSet
1.定义 HashSet继承AbstractSet类,实现Set,Cloneable,Serializable接口.Set 接口是一种不包括重复元素的 Collection,它维持它自己的内部排序,所 ...
- php中session同ip不同端口的多个网站session冲突的解决办法
在局域网内使用IP加端口的访问方式搭了两个相同程序的站,结果发现用户在一个站下登录后,在另一个站也同时登录了,在一个退出后,另一个站也同时退出了.看了下程序发现两个站都是使用纯session方式记录登 ...
- PHP中array_map与array_column之间的关系分析
array_map()与array_column()用法如下: array_map();将回调函数作用到给定数组的单元上array_column();快速实现:将二维数组转为一维数组 array_co ...
- paymob浙江正和
#region 上海 ZH //else if (order.SP.Contains("上海") && order.Area.Contains("移动&q ...
- Python语言知识总结
1. 环境 1.1 Anaconda 抛弃python原生安装方式吧,使用Anaconda才是最省心的. 1.2 Miniconda Anaconda 太大了,Miniconda才是王道!下载链接:h ...
- Improving your submission -- Kaggle Competitions
1: Improving Our Features In the last mission, we made our first submission to Titanic: Machine Lear ...