CSS基础

最新推荐文章于 2018-12-30 10:44:56 发布
最新推荐文章于 2018-12-30 10:44:56 发布
阅读量379 收藏
点赞数
分类专栏： CSS Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zw11208781/article/details/72717186
版权
Web 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
CSS
2 篇文章 0 订阅
订阅专栏

1 CSS入门

 

JAVA课程：http://www.mukedaba.com/forum-39-1.html

1.1 引入

html： 负责网页的结构

css： 负责网页的美观（样式）

1.2 体验

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css入门</title>

<style type="text/css">

a{

font-size:24px;

color:#0F0;

}

</style>

</head>

 

<body>

<a href="xxxx" >超链接</a><br/>

<a href="xxxx" >超链接</a><br/>

<a href="xxxx" >超链接</a><br/>

<a href="xxxx" >超链接</a><br/>

</body>

</html>

 

1.3 定义

 CSS（Cascading Style Sheet 层叠样式表） 简称，样式。

主要负责网页的美观。

1.4 css的使用方式

1）行内样式

注意：

1）使用标签的style属性进行css控制，css写在style属性值中

2）弊端：只能控制一个标签的样式

<a href="xxxx" style="font-size:24px;">超链接</a>

 

2）内部样式

注意：

1）使用style的标签进行css控制，css内容写在style标签体内

2）一次控制多个标签的样式

3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用

<style type="text/css">

a{

font-size:24px;

color:#0F0;

}

</style>

 

3）外部样式（推荐使用）

注意：

1）建立独立后缀为css的文件，css内容写在该文件中

2）在使用css的html页面中，导入外部css文件

<!-- 导入外部css文件

href  : 表示外部css文件的位置

    rel: 表示关联的是样式表

-->

<link href="01.css" rel="stylesheet"/>

2 CSS语法

a{

font-size:24px;

color:#F00;

}

 

选择器（selector）：使用选择器来选择需要添加样式的标签。

CSS属性（property）：给选择的标签添加什么样式。例如， 字体大小，颜色，背景.....

CSS值（value）：添加样式的具体值。12px , 红色，背景图片....

 

2.1 选择器

标签选择器

作用： 选择同名的标签

div{

font-size:24px;

color:#F00;

}

注意：

1）选择到所有同名的标签

 

类选择器

作用： 选择同类的标签

/*类选择器*/

.c1{

font-size:24px;

color:#F00;

}

注意：

1）选择的标签必须有class的属性。同类的标签使用同名

2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！

id选择器

作用： 选择一个标签

#d1{

font-size:24px;

color:#0F0;

}

注意：

1）选择的标签必须有id属性。

2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")

3）id选择器的优先级最高！

 

并集选择器

/*并集选择器*/

.c1,#d1{

font-size:24px;

color:#0F0;

}

作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。

 

交集选择器

/*交集选择器

div里面的span标签

*/

.c1 span{

font-size:24px;

color:#0F0;

}

 

作用： 选择某个选择器中的子标签。

 

通用选择器

 

/*通用选择器*/

*{

font-size:24px;

color:#0F0;

}

作用； 选择所有的标签

伪类选择器

作用：控制标签在不同状态下的样式。

 

标签有四种状态：

link: 没有访问过的状态

hover: 鼠标经过的状态

active:鼠标激活（按下但没有松开）的状态

visited: 已经被访问过的状态（鼠标点下且松开）

 

<style type="text/css">

/*使用link伪类控制--没有访问过的状态*/

a:link{

font-size:24px;

color:#F00;

}

/*使用visited伪类控制--已经被访问过的状态（鼠标点下且松开）*/

a:visited{

font-size:24px;

color:#CCC;

text-decoration:none;

}

/*使用hover伪类控制-鼠标经过的状态*/

a:hover{

font-size:24px;

color:#00F;

text-decoration:none;

}

 

/*使用active伪类控制--鼠标激活（按下但没有松开）的状态*/

a:active{

font-size:24px;

color:#0F0;

text-decoration:underline;

}

/*注意：

1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有

效的。

    正确顺序： link visited hover active

*/

</style>

</head>

 

<body>

<a href="01.css入门.html">超链接</a>

</body>

</html>

 

2.2 常用的CSS属性和值

CSS文本

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css文本</title>

<style type="text/css">

body{

/*color：颜色*/

color:#F00;

/*字符间距*/

letter-spacing:10px;

/*对齐方式*/

text-align:center;

/*文本修饰  下划线-underline，  中划线(line-through)   上划线-overline  没有:none*/

text-decoration:line-through;

/*单词间距*/

word-spacing:30px;

}

</style>

</head>

 

<body>

今天 天气 不错！

</body>

</html>

 

CSS字体

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css字体</title>

<style type="text/css">

body{

/*字体类型

注意：这里的字体类型是读取系统的默认字体库，尽量使用通用的字体，如果你设置的字体，用户的系统上没有，就是使用默认的宋体显示。

*/

/*

font-family:"宋体";

*/

/*字体大小*/

/*

font-size:24px;

*/

/*字体样式: 正(normal默认)  斜(italic)*/

/*

font-style:italic;

*/

/*字体粗细  bold 加粗*/

/*

font-weight:bold;

*/

/* font: 简写属性 */

font:italic bold 36px "黑体";

}

</style>

</head>

 

<body>

传智播客

</body>

</html>

 

CSS背景

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css背景</title>

<style type="text/css">

body{

/*背景颜色*/

/*

background-color:#0CF;

*/

/*背景图片*/

/*

background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);

*/

/*设置背景图片是否重复，或如何重复

not-repeat: 不重复

repeat-x: x轴重复

repeat-y: y轴重复

repeat: x和y轴重复(默认)

*/

/*

background-repeat:no-repeat;

*/

/*设置背景的起始位置*/

/*

background-position:top center;

*/

/*简写属性*/

background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;

}

</style>

</head>

 

<body>

</body>

</html>

 

CSS列表

CSS表格

CSS边框

3 盒子模型

3.1 定义

可以把html页面上每个标签看做是一个盒子。

 

盒子相关的属性：

宽度和高度（width和height）： 决定这个盒子的容量

内边距（padding）： 盒子边框与内容的距离

边框（border）： 盒子的厚度

外边距（margin）： 盒子与盒子之间的距离

4 CSS定位

5 Javascript入门

     5.1 引入

html：负责网页结构

css： 负责网页美观

javascript：负责用户与浏览器交互。

5.2 javacript的来由

1994时，网景公司研发了livescript语言，领航者浏览器（把livescript语言植入到浏览器）

微软公司的IE浏览器，后来自己花钱20亿美金研发jscript

 

1995年，Sun公司，推出jdk1.1 .谈合作。livescript-》javascript

1998，美国在线收购网景。

 

2003，直接关闭网景。网景6-7亿美金。2千万美金，组建谋智基金（火狐）

 

javascript   jscript    语法不同。 ECMA（欧洲制造商联盟）

 

scirpt的语法：

1）基础语法（ECMA规范）

2）BOM编程（没有统一）

3）DOM编程（没有统一）

 

 

楚狂
关注
专栏目录
猎豹网校 DirectX 9.0 3D 密码：www.mukedaba.com游戏开发编程基础
08-16
Microsoft DirectX 是这样一组技术：它们旨在使基于Windows 的计算机成为运行和显示具有丰富多媒体元素（例如全色图形、视频、3D 动画和丰富音频）的应用程序的理想平台。DirectX 包括安全和性能更新程序，以及许多涵盖所有技术的新功能。应用程序可以通过使用DirectX API 来访问这些新功能。
jun-bigdata大数据平台服务框架,实现了Kafka实时数据过滤、清洗、转换、消费+源代码+文档说明
03-20
- 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ <项目介绍> 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
hadoop新的资源
weixin_30654583的博客
09-04 99
链接：http://pan.baidu.com/s/1pL56hkv 密码：u4h3解压密码：www.mukedaba.com 1."Hadoop.Operations.pdf.zip"http://vdisk.weibo.com/s/vDOQs6xMAQH622."Hadoop权威指南(中文版)(带书签).pdf"Hadoop权威指南(中文版)(带书签).pdf3."[Hadoop权威指...
Java 基础学习资料
china20184的博客
04-07 90
课程简介： 很适合初学者的java学习资料，里面有工具 视频 源代码！ 课程地址： www.mukedaba.com/thread-926-1-1.html 转载于...
学IT必看十大论坛
凤凰的专栏
05-29 1911
学IT必看十大论坛 　　IT方面的论坛多如牛毛，经常往返于各大论坛，体会颇深，以前是哪个论坛人气旺就往哪钻，去了以后才发现没什么意思，不能产生共鸣，于是乎，开始逛专业论坛，行业论坛，终于找到了共同语言，终于明白：人不在多，专则灵，贴不在多，精则行。为了能使大家都成为IT四有新人（技术、业务、理论、思想）特推荐如下经典论坛，或许能帮到您。以下论坛排名不分先后，还有很多业界知名论坛也
CSS基础知识.pdf
10-04
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
前端CSS基础-常规流练习.rar
04-09
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
CSS基础入门总结（很详细的哟）
10-25
（1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、CSS字体属性 （1）字体大小 （2...
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
css基础教程之CSS基础语法
09-25
CSS（层叠样式表）是用于控制网页元素外观的关键技术。在本教程中，我们将深入探讨CSS的基础语法，包括如何应用样式以及选择器的使用。...为了创建美观且易于管理的网页，掌握CSS基础语法至关重要。
史上最全的java书籍
02-01
史上最全的java书籍，包括多线程、web基础、架构、框架的
麦子学院Python明星教程视频百度云
11-25
想学习Python的机械学习和深度学习的初学者们，这里有最全的Python教程，从入门到高阶教程应有尽有
java知识点
阿浩的博客
12-30 4241
必会知识点 是什么 在哪里用，怎么用，遇到了什么问题 绿色：看到问题想到代码 黄色：知道理论不知道代码 红色：没有听过 一．Corejava 【】 1.jdk ,jre,jvm的区别: jdk:Java 开发工具包（JRE+编译工具） jre:Java 运行时环境（JVM+类库） jvm:Java 虚拟机 2.环境变量的解释: 目的：在任意路径下能够直接执行相关命令。 原理：在命令行中执行某...
Android黑马外卖v2.0视频__百度云盘
wudongjiang333的博客
09-21 5650
黑马程序员黑马外卖教学视频 免费下载 链接：http://pan.baidu.com/s/1hskT7ow 密码：24rt 解压密码：www.mukedaba.com
WEB开发自己收集的资源
03-22 281
下面分享一些自己在网上收集到的一些WEB相关技术的网络视频资源： 最新2016前端与移动开发培训教程 基础+就业 链接：http://pan.baidu.com/s/1pLMoM8r密码：bg1l 解压密码：www.mukedaba.com/forum-38-1.html 其他]Node.JS Web全栈工程师系列课程 链接:http://...
android checkbox 扩大点击区域
简
12-20 3689
有效的实现方式：  <CheckBox             android:id="@+id/cb_market_car_selection"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:button="
Android FrameWork底层开发视频全套
热门推荐
dingzhou2008good的专栏
12-03 1万+
AndroidFrameWork底层开发视频全套 1. 如题，下面是百度云盘链接： 链接: https://pan.baidu.com/s/1JWmAp30xIBtMUnDxf3jCeQ 密码: ggjp 免费（无解压密码），好东西要分享出来！ 2. 主要内容：Android开发环境与编译android.mk Android启动模式init启动分析init脚本执行和进程守护androi...
基于java的共享汽车管理系统的开题报告2.docx
最新发布
09-25
基于java的共享汽车管理系统的开题报告2.docx
XHTML与CSS基础知识入门指南
本篇教程是关于XHTML与CSS基础知识的教学，旨在为有一定HTML和CSS基础的网页开发者提供一个从表格布局向Web标准（div+css）过渡的学习路径。对于初次接触网页制作的新手，需要具备基本的网页基础知识，包括了解表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值