您的位置：首页 > Web前端 > CSS

基础的CSS和CSS3的内容

2019-07-28 01:43 295 查看

1、CSS是什么？
层叠样式表 (Cascading Style Sheets)
定义如何显示HTML元素的样式
2、CSS的作用是什么？
1、提高工作效率
2、多样式层叠
3、提高了内容和样式的分离

就是美化HTML显示的内容

3、CSS的语法规则
规则：
选择器{属性名称:值;属性名称:值}

h1{color:red;}

CSS不区分大小写，但是id和class选择器区分大小写(class一般是用于css，id一般用于js)

4、CSS的引入方式有多少？
1、内嵌样式
Html元素都有一个属性：style,直接在html元素内使用

<h1 style="font-size:20px">
今天好好听课
2、内部样式
在html文档的
<head>
标签中使用

<style type="text/css">
选择器{属性名称:值}
width:100px;
color:red;
</style>

3、外部样式表
创建css文件，在网页中的中通过标签引用

<link rel="stylesheet" type="text/css" href="theme.css" />

rel：文本类型，告知引用的类型
type:MIME类型
href:外部样式文件所在路径
4、导入式外部样式
@import url(“外部样式文件路径”)
不推荐使用，主要针对IE老版本

样式作用的优先级：
内嵌->内部->外部
就近原则

5、CSS的选择器
1、标签选择器
格式：HTML标签名称{属性名:值}

2、类选择器
要求html的标签使用class属性命名类名
格式：.类名{属性名:值}

HTML标签可以拥有同一个class

3、ID选择器
要求HTML的标签使用id属性名称，id名不可重复
格式：#id名称{属性名:值}

4、派生选择器
规则：选择器(标签、类、id) 内部标签名称{属性名:值}
就是通过标签的内部嵌套来修改指定标签的样式

5、属性选择器
规则：标签名称(可以省略)[属性名称=“值”]{属性名:值}
就是通过标签的属性名称来修改指定标签的样式

6、伪类选择器
规则：标签名称:伪类名称{属性名:值}
常用的伪类：
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。

6、CSS的属性
1、背景属性
background:背景色/图
background-color:背景色
background-image:背景图
图片过小，标签过大默认会出现背景重复
background-repeat:设置重复样式
取值：
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
background-position:定位，显示的位置
取值：
left
right
top
bottom
center
具体数值
background-attachment:设置背景图是否跟着一起动
取值：
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。

2、文本属性
1、text-indent：缩进
2、text-align:对齐方式
3、letter-spacing: 字母的间距
4、word-spacing:单词的间距
5、text-transform:变换，大小写转换
取值：
none
uppercase
lowercase
6、 text-decoration:文本装饰
取值：
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
7、direction: 文本方向
取值：
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。

3、字体属性
1、font-family：字体类型
楷体、黑体、宋体等
2、font-style：设置是否倾斜
3、font-weight:设置字体的粗细
取值：
[100,900]
正常：400
加粗：700
4、font-size：字体大小

4、列表属性(不常用)
1、list-style-image 将图象设置为列表项标志。
2、list-style-type 设置列表项标志的类型

5、表格属性
1、width:宽
2、height:高
3、border:边框
4、text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中
5、vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：

6、轮廓属性(不常用)
1、outline-color 设置轮廓的颜色。
2、outline-style 设置轮廓的样式。
取值：
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
3、outline-width 设置轮廓的宽度。

7、注释
网页中：多个空格会起到一个空格的作用，换行也会起到一个空格的作用
注释：
java中的注释：
1、单行注释 eg：

//注释

2、多行注释 eg:
/*多行注释*/

3、文档注释 eg:
/**文档注释*/

HTML中的注释：
1、
<!--html的注释-->

CSS中的注释：只出现在
<style>
或css文件中
1、
/*CSS注释*/

JavaScript中的注释：只出现在
<script>
或js文件中
1、单行注释 eg:
//单行注释

2、多行注释 eg:
/*多行注释*/

8、CSS3新增属性
1、 border-radius 圆角
2、 box-shadow 阴影

box-shadow: X轴偏移值 Y轴偏移值 X轴阴影模糊半径 Y轴阴影模糊半径 阴影颜色;

3、 background-image

background-image: url("images/22.jpg");

4、background-size 调整背景图片的大小
5、background-origin 规定背景图片的定位区域
6、background-clip 规定背景的绘制区域
7、 linear-gradient 背景的颜色渐变

background: linear-gradient(red, yellow);

8、 text-shadow 文本阴影

text-shadow：X轴偏移值，Y轴偏移值，阴影模糊半径，颜色

9、opacity 透明度 默认值100%

.opacity{
-webkit-filter:opacity(a);
}

10、position定位
语法：position：relative | absolute | fixed
11、display布局
语法：display：inline、block、inline-block、none
12、clear：清除浮动
13、文字的尺寸
em:自动适应尺寸，方便字体的放大或缩小
1em=16px
0.75em=12px
默认字体大小16px
px：像素，表达字体大小，缩放的时候有点不好用
为了网页的实用性，推荐字体大小单位em，%:百分比表达字体大小

14、rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。

15、italic和oblique的区别？
体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航