web前端学习（三）css学习笔记部分（1）-- css入门基础知识+基本样式
1.介绍及语法
1.1CSS概述：
CSS指层叠样式表
CSS样式表极大地提高了工作效率
如果值大于一个单词，需要加上引号（意思是值只有一个的时候可以不加引号）
1.2CSS高级语法
1.选择器分组
h1,h2,h3,h4,h5,h6{color:red;}
2.继承(需要子元素没有属于他自己的CSS样式)
body{
color:green;
}
2.派生选择器
2.1派生选择器：
通过依据元素在其位置的上下文关系来定义样式
css.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css1</title>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<p><strong>p标签hello Css</strong></p>
<ul>
<li><strong>li标签：Hello Css</strong></li>
</ul>
</body>
</html>
css.css
strong{
color:blueviolet;
}
li strong{
color:red;
}
/*选择<li>标签下的<strong>标签*/
/*li strong{*/
/*color:red;*/
/*}*/
/*strong{*/
/*color:blueviolet;*/
/*}*/
/*简单来说，包括范围大的选择器优先级低于包括范围小的选择器。*/
3.id选择器
3.1id选择器：
id选择器可以为标有id的HTML元素指定特定的样式
id选择器以#来定义
3.2id选择器和派生选择器
目前比较常用的方式是 id选择器常常用于建立派生选择器（二者同时使用）。
css.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css1</title>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<p id="pid">hello css <a href="http://www.baidu.com">百度</a></p>
<div id="divid">
我的css id测试
</div>
</body>
</html>
css.css
#pid a{
color:blueviolet;
}
/*更改id为pid的标签下的a标签的颜色，不会更改其他内容
以此类推可以得到很多id下的类或者标签或者id等派生选择器。
*/
#divid{
color:red;
}
4.类选择器
类选择器的使用方法和id选择器的使用方法基本一样
5.属性选择器
5.1属性选择器：
对带有指定属性的HTML元素设置样式
5.2属性和值选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css1</title>
<style>
[title]{
color:blue;
}
[title=te]{
color:red;
}
</style>
</head>
<body>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
</body>
</html>
属性和值选择器在ie6以及更低版本不支持使用。
2.基本样式
2.1背景
| 属性 | 描述 |
| background-attachment | 背景图像是否固定或者随这页面的其余部分滚动 |
| background-color | 设置元素的背景颜色 |
| background-image | 把图片设为背景 |
| background-position | 设置背景图片的起始位置 |
| background-repeat | 设置背景图片是否以及如何重复 |
| background-size | 规定背景图片的尺寸 |
| background-origin | 规定背景图片的定位区域（背景图片是相对于谁定位的） |
| background-clip | 规定背景的绘制区域 |
单词表示位置法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css1</title>
<style>
body{
background-image:url("bg.jpg");
background-repeat: no-repeat;
/*background-position: right center;*/
/*!*right center*/
/*left top*/
/*right bottom自由组合!*/
}
</style>
</head>
<body>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
</body>
</html>
百分比（最好不要用数值，不能够及时响应，提前规定好容器的宽度就可以）表示法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css1</title>
<style>
body{
height:300px;
background-image:url("bg.jpg");
background-repeat: no-repeat;
background-position: 30% center;
/*这个属性跟容器的宽度好像没关系*/
/*background-position第一个值是图在容器中的水平位置在哪，
第二个属性设置的是图如何在div中显示，图片要在容器的垂直位置在哪*/
/*!*right center*/
/*left top*/
/*right bottom自由组合!*/
/*background-size: 50% 100%;*/
/*这个属性可以实现将图片充满div
但是这个属性又会和position冲突，position是保持原图比例的*/
/*background-attachment: fixed;*/
/*设置了background-attachment: fixed这个属性之后图片会在浏览器窗口保持静止
不会随着网页滚动，很奇怪这个属性会导致background-position与body的height关系失效*/
}
</style>
</head>
<body>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p><p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
<p title="t">属性选择器</p>
<p title="te">属性和值选择器</p> <p title="t">属性选择器</p>
<p title="te">属性和值选择器</p>
</body>
</html>
2.2文本
2.2.1CSS文本
CSS文本属性可以改变文本颜色、字符间距、对齐文本、装饰文本、装饰文本、文本缩进
| 属性 | 描述 | 备注 | ||||||||||
| color | 文本颜色 | |||||||||||
| direction | 文本方向 | |||||||||||
| line-height | 行高 | |||||||||||
| letter-spacing | 字符间距 | |||||||||||
| text-align | 对其元素中的文本 | left,center,right | ||||||||||
| text-decoration | 向文本添加修饰 | |||||||||||
| text-indent | 缩进元素中文本的首行 | 可以为负值，可与padding相互配合使用 | ||||||||||
| text-transform | 元素中的字母 |
|
||||||||||
| unicode-bidi | 设置文本方向 | |||||||||||
| white-space | 元素中空白的处理方式 | |||||||||||
| word-spacing | 字间距 |
|
象素px是我们在定义CSS中经常用到的尺寸大小单位，而em在国外网站中经常被使用，px和em之间究竟有什么区别和特点呢？ ◆px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 ◆em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 |
css3文本效果：
text-shadow：向文本添加阴影
p{text-shadow: 100px 100px 2px #FFFF00}
/*(其中的2px值是清晰度，数值越小越清晰)*/
word-wrap：规定文本的换行规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
width:300px;
text-wrap:normal;
/*文本自动换行，如果是英文的话，不会给你自动拆分字母*/
}
</style>
</head>
<body>
<p>hello world haha aaa asldfkjassjfl hello world haha aaa asldfkjassjfl hello world haha
aaa asldfkjassjfl hello world haha aaa asldfkjassjfl </p>
</body>
</html>
2.3字体
| 属性 | 描述 |
| font-family | 设置字体系列 |
| font-size | 设置字体的尺寸 |
| font-style | 设置字体风格 |
| font-variant | 以小型大写字体或正常字体显示文本 |
| font-weight | 设置字体的粗细 |
p{
font-size: 40px;
font-family: fantasy;
}
@font-face {
font-family: myfont;
src:url("");
}
/*使用上面这种方法自己定义系统不存在的字体*/
div{
font-family: myfont;
}
2.4链接
2.4.1CSS链接的四种状态
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
通过使用text-decoration:none;可以去除掉链接的下划线
2.5列表
css列表属性允许你放置、改变列表标志，或者将图像作为列表项标志
| 属性 | 简单列表项 |
| list-style | 列表项图像 |
| list-style-image | 列表项图像（url（"image.png"）） |
| list-style-position | 列表标志位置 |
| list-style-type | 列表类型（点、圆、方块、数字（decimal）） |
ul li{
/*设置ul标签下的所有li标签属性*/
}
资源加载方面id和class有区别：
id是先找到结构、内容，再加载样式，class是先加载好样式，再找结构和内容
2.6表格
2.6.1CSS表格
2.6.2表格边框
table{
border:1px solid blue;
/*border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线*/
}
2.6.3折叠边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#tb,tr,td,th{
border:1px solid blue;
/*border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线*/
}
#tb{
border-collapse: collapse;
/*将表格内部细胞的边框合并；*/
}
</style>
</head>
<body>
<table id="tb">
<tr>
<th>表格1</th>
<th>表格2</th>
<th>表格3</th>
</tr>
<tr>
<td>表格4</td>
<td>表格5</td>
<td>表格6</td>
</tr>
<tr>
<td>表格7</td>
<td>表格8</td>
<td>表格9</td>
</tr>
</table>
</body>
</html>
2.6.4表格宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#tb,tr,td,th{
border:1px solid blue;
/*border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线*/
text-align: center;
/*将表格内部内容水平居中*/
}
#tb{
height:400px;
width:400px;
border-collapse: collapse;
/*将表格内部细胞的边框合并；*/
}
</style>
</head>
<body>
<table id="tb">
<tr>
<th>表格1</th>
<th>表格2</th>
<th>表格3</th>
</tr>
<tr>
<td>表格4</td>
<td>表格5</td>
<td>表格6</td>
</tr>
<tr>
<td>表格7</td>
<td>表格8</td>
<td>表格9</td>
</tr>
</table>
</body>
</html>
2.6.5表格文本对齐
2.6.6表格内边距
2.6.7表格颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#tb,tr,td,th{
border:1px solid blue;
/*border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线*/
text-align: center;
/*将表格内部内容水平居中*/
padding:10px;
/*这一项要要求tb的宽度和高度不能同时已经确定才可以使用
只修改那一项没有定下的那个方向的数值*/
}
#tb{
height:400px;
/*width:400px;*/
border-collapse: collapse;
/*将表格内部细胞的边框合并；*/
}
#tb tr.alt111{
color:black;
background-color: aqua;
}
/*设置id为tb的元素下的类为alt111的tr的style样式*/
</style>
</head>
<body>
<table id="tb">
<tr>
<th>表格1</th>
<th>表格2</th>
<th>表格3</th>
</tr>
<tr class="alt111">
<td>表格4</td>
<td>表格5</td>
<td>表格6</td>
</tr>
<tr>
<td>表格7</td>
<td>表格8</td>
<td>表格9</td>
</tr>
</table>
</body>
</html>
2.7轮廓
轮廓主要是用来突出元素的作用
| 属性 | 描述 |
| outline | 设置轮廓属性 |
| outline-color | 设置轮廓的颜色 |
| outline-style | 设置轮廓的样式 |
| outline-width | 设置轮廓的宽度 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>outline</title>
<style>
p{
/*outline-style: double;*/
/*双重实线*/
/*outline-style: groove;*/
/*加重实线*/
outline-style: dotted;
/*加重点线*/
}
</style>
</head>
<body>
<p>这是一段轮廓着重！</p>
</body>
</html>
web前端学习（三）css学习笔记部分（1）-- css入门基础知识+基本样式的更多相关文章
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- 风炫安全WEB安全学习第十九节课 XSS的漏洞基础知识和原理讲解
风炫安全WEB安全学习第十九节课 XSS的漏洞基础知识和原理讲解 跨站脚本攻击(Cross-site scripting,通常简称为XSS) 反射型XSS原理与演示 交互的数据不会存储在数据库里,一次 ...
- web前端开发常用的10个高端CSS UI开源框架
web前端开发常用的10个高端CSS UI开源框架 随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...
- Web前端开发最佳实践（9）：CSS代码太太乱，重复代码太多？你需要精简CSS代码
前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...
- 学习React之前你需要知道的的JavaScript基础知识
在我的研讨会期间,更多的材料是关于JavaScript而不是React.其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内 ...
- tensorflow笔记（一）之基础知识
tensorflow笔记(一)之基础知识 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7399701.html 前言 这篇no ...
- php面试笔记（5）-php基础知识-自定义函数及内部函数考点
本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而函数相关的考点 ...
随机推荐
- Python ----键抠图
背景 这段时间,经常有人来找我,说我是学计算机的,能不能帮他p一下证件照,我只想说,MMP的,我是学计算机的不错,可我不会ps阿. 我想了一会,python 这么火,能不能来个自动抠图,说好就干吧 介 ...
- Node中js获取异步操作的结果
js中要获取异步操作的结果必须使用回调函数 回调函数也被称为高阶函数,简单来说就是,函数作为一个参数传到另一个主函数里面,当那一个主函数执行完之后,再执行传进去的作为参数的函数 function fn ...
- 不同版本springboot端点开启方法
1.X版本与2.X区别:2.X大部分路径要加“/actuator” 端点列表(注意最后一栏Sensitive为true的端点如果不设置为false将不可访问): https://docs.spring ...
- C/C++获取系统当前时间
C/C++获取系统当前时间 C库中与系统时间相关的函数定义在<time.h>头文件中, C++定义在<ctime>头文件中. 一.time(time_t*)函数 函数定义如 ...
- tyvj 1266 费解的开关
传送门 解题思路 枚举第一行的状态,判断后面可不可行. 代码 #include<iostream> #include<cstdio> #include<cstring&g ...
- vue.js_01_vue.js的入门
1.什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于 ...
- PHP实现微信退款的分析与源码实现
原文:https://blog.csdn.net/jason19905/article/details/78628349 网上的很多PHP微信支付接入教程都颇为复杂,且需要配置和引入较多的文件,本人通 ...
- 深入浅出 Java Concurrency (21): 并发容器 part 6 可阻塞的BlockingQueue (1)[转]
在<并发容器 part 4 并发队列与Queue简介>节中的类图中可以看到,对于Queue来说,BlockingQueue是主要的线程安全版本.这是一个可阻塞的版本,也就是允许添加/删除元 ...
- 组件：参数验证props:组件参数验证语法
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- XSS“从1到0”
时隔半年终于也应该更新了,之前说的每周更新也因为懒散这个借口变得遥遥无期.之所以叫这个标题,是在Freebuf上看到一篇文章,开头作者问到:“网上大多的文章标题都是XXX从0开始,可我们到底什么时候能 ...