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. SQL小结

    1. 一般而言,除非你确实需要表中的每一列,否则最好别使用*通配符.虽然使用通配符让你自己省事,不用明确列出所需列,但检索不需要的列通常会降低检索和应用程序的性能. 2. DISTINCT关键字作用于 ...

  2. C#获取驱动器盘符

    一.使用ManagementObjectSearcher类 static void Main(string[] args) { SelectQuery selectQuery = new Select ...

  3. 13年总结js,css,java xml

    --------------------------------------javaScript知识点----------------------------- jQuery对象[Object obj ...

  4. API gateway 之 kong 安装

    kong安装: https://getkong.org/install/centos/ 下载指定版本rpm: wget https://bintray.com/kong/kong-community- ...

  5. Caterpillar sis service information training and software

    Cat et sis caterpillar heavy duty truck diagnostics repair. Training demonstration allows.cat electr ...

  6. python-数据分析与展示(Numpy、matplotlib、pandas)---3

    笔记内容整理自mooc上北京理工大学嵩天老师python系列课程数据分析与展示,本人小白一枚,如有不对,多加指正 0.pandas基于Numpy实现的,前者注重应用,后者注重结构 1.Series类型 ...

  7. 安装mysql警告 warning: mysql-community-server-5.7.19-1.el6.x86_64.rpm: Header V3 DSA/SHA1 Signature, key ID 5072e1f5: NOKEY

    摘自:https://www.cnblogs.com/royfans/p/7243641.html 红帽安装rpm安装MySQL时爆出警告: 警告:MySQL-server-5.5.46-1.linu ...

  8. C++ STL--顺序容器(vector)

    STL(标准模板库) 一套功能强大的 C++ 模板类,提供了通用的模板类和函数,这些模板类和函数可以实现多种流行和常用的算法和数据结构,如向量.链表.队列.栈. C++标准模板库的核心包含以下组件: ...

  9. HashMap和LinkedHashMap区别

    import java.util.HashMap; import java.util.Iterator; import java.util.LinkedHashMap; import java.uti ...

  10. javaweb笔记06—(页面跳转及编码格式)

    1.指令:<%@     %>:一个页面可以有多个import, 但是标识本页面为jsp页面的指令只能是一条(建议是一条 ) 2.出错页面:<%@ isError(true)%> ...