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基本内容的更多相关文章

  1. Python开发【第十篇】:CSS --无内容点击-不进去(一)

    Python开发[第十篇]:CSS  --无内容点击-不进去(一)

  2. 使用CSS为内容设定特定的鼠标样式(cursor)介绍

    相信大家都知道我们的鼠标在网页中不同的元素中有不同的显示(例如 a 元素就显示为“箭头指针”),但是其实我们还可以自定义这些有趣的东西哦!今天“畅想资源”就来教大家如何使用CSS为内容设定特定的鼠标样 ...

  3. css基础内容

    css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离 ...

  4. div+css隐藏内容样式方法

    div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...

  5. CSS进阶内容—盒子和阴影详解

    CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...

  6. CSS进阶内容—浮动和定位详解

    CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...

  7. CSS进阶内容——布局技巧和细节修饰

    CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...

  8. 使用CSS使内容垂直居中的N中方法。

    使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论.   1.当待垂直居中的DIV高宽为已知时: ...

  9. CSS生成内容

    在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现.但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”.“ ...

  10. CSS应用内容补充及小实例

    一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. JS神经网络deeplearn.js:浏览器端机器智能框架

    JS神经网络deeplearn.js:浏览器端机器智能框架 通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeS ...

  2. java连接oracle数据库使用SERVICE NAME、SID以及TNSName不同写法

    格式一: 使用ServiceName方式: jdbc:oracle:thin:@//<host>:<port>/<service_name> 例 jdbc:orac ...

  3. C++中set用法详解

    1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...

  4. ORCAl存储过程

    1.存储过程结构 1.1 第一个存储过程 create or replace procedure proc1( para1 varchar2, para2 out varchar2, para3 in ...

  5. goldengate 12.3 实现mysql数据及DDL实时同步

    以下环境在mysql 5.7上完成. set mysql_home=mysql安装路径 set path=%mysql_home%\bin;%path% 首先要准备mysql的启动,可参考:http: ...

  6. 金九银十跳槽季,程序员面试点解析之Java专场

    前言 近年来Java工程师这个岗位炙手可热,市场需求大,学习Java的人也越来越多,所以IT企业与求职者的选择都比较多,那么IT企业在面试时都会提哪些问题呢.下面为大家分享 Java高级工程师面试阿里 ...

  7. Oracle之数据库的增删改查和格式的修改

    Oracle修改数据 *update语句 格式: update table_name set column1=value1,…[where conditions] 例子: update userinf ...

  8. JSP Servlet javaben

    CLASSPATH=D:\Dev\jdk\lib\tools.jar;D:\Dev\jdk\lib\dt.jarJAVA_HOME=D:\Dev\jdkPath=%JAVA_HOME%\bin 一:T ...

  9. sql 思路

    先 django 定好sql框架 再 sqlalchemy 根据框架写...

  10. H5+JS生成验证码

    效果图如下: <canvas id="canvas1" style="margin-left: 200px;"></canvas>< ...