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 ...
随机推荐
- JS神经网络deeplearn.js:浏览器端机器智能框架
JS神经网络deeplearn.js:浏览器端机器智能框架 通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeS ...
- java连接oracle数据库使用SERVICE NAME、SID以及TNSName不同写法
格式一: 使用ServiceName方式: jdbc:oracle:thin:@//<host>:<port>/<service_name> 例 jdbc:orac ...
- C++中set用法详解
1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...
- ORCAl存储过程
1.存储过程结构 1.1 第一个存储过程 create or replace procedure proc1( para1 varchar2, para2 out varchar2, para3 in ...
- goldengate 12.3 实现mysql数据及DDL实时同步
以下环境在mysql 5.7上完成. set mysql_home=mysql安装路径 set path=%mysql_home%\bin;%path% 首先要准备mysql的启动,可参考:http: ...
- 金九银十跳槽季,程序员面试点解析之Java专场
前言 近年来Java工程师这个岗位炙手可热,市场需求大,学习Java的人也越来越多,所以IT企业与求职者的选择都比较多,那么IT企业在面试时都会提哪些问题呢.下面为大家分享 Java高级工程师面试阿里 ...
- Oracle之数据库的增删改查和格式的修改
Oracle修改数据 *update语句 格式: update table_name set column1=value1,…[where conditions] 例子: update userinf ...
- JSP Servlet javaben
CLASSPATH=D:\Dev\jdk\lib\tools.jar;D:\Dev\jdk\lib\dt.jarJAVA_HOME=D:\Dev\jdkPath=%JAVA_HOME%\bin 一:T ...
- sql 思路
先 django 定好sql框架 再 sqlalchemy 根据框架写...
- H5+JS生成验证码
效果图如下: <canvas id="canvas1" style="margin-left: 200px;"></canvas>< ...