HTMLCSS样式实例分析

今天小编给大家分享一下HTML CSS样式实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：做网站、网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的花垣网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

一、css

1.什么是css？

Cascading Style Sheet 级联样式表

改变样式的一个工具，说白了，就是为了让我们的页面好看，

HTML底层封装了css这样一个工具。

2.怎么使用css

a、style 风格、样式

这个关键词写到标签内部，可以修改标签的样式

注意：写在标签内部！也就是>里面

3.css样式，分为三种

a、行内样式表

111111111111

其中：style="color:#0FC"就是改变当前这个标签的样式。

b、内部样式表

选择器：告诉程序，我们要改变谁的样式。

id选择器：

1、在标签内加上id属性

2、在写之前，要加上#

类选择器：

1、在标签内加上class属性

2、类选择器，写之前，要加上。

注意：以。开头

标签选择器：

注意：

1、style里面要写上type属性，标识这是改变css

2、选择器后面要加上一对{} ，

3、每一句改变样式之后，要加上;

c、外部样式表

写在我们网页的外面

1、新建一个css

2、在css中写上相对应的样式

3、将css样式导入网页

a、

b、

d、样式表的优先级

行内样式表>内部样式表>外部样式表

e、选择器的优先级

id选择器>类选择器>标签选择器

f、并集选择器

通过一个详细的描述或者说地址来查找某一个或者某一组相对应的标签

p,#id,.class{}

会改变所有p、id和class所覆盖的标签样式，中间用英文输入法的“，”号隔开

g、交集选择器

h4.cecond{}

会先查找h4标签，再查找所有h4标签里面的类名为second的标签修改属性

中间没有任何东西进行连接

h、后代选择器

会根据所写的标签或者选择器，进行一层一层的查找，直到最后查找到所需要的标签，中间用“ ”隔开

小结：

标签选择器是直接应用于所有的HTML标签

类选择器可以在页面中多次使用

id选择器在页面中只能使用1次

i、css属性

1、字体样式：

font-style： 设置字体风格

font-weight： 设置字体粗细

font-size： 设置字体尺寸

font-family： 设置字体系列

font： 把以上所有的设置全部设置在一个属性中

2、文本样式：

color： 设置字体颜色

line-height： 设置行高

text-align： 设置文本的对齐方式

text-decoration：设置文本的装修，例如：underline、none、line-through

3、背景属性：

background-color： 设置背景颜色

background-image: 设置背景图片

background-position：设置背景的位置

background-repeat： 设置背景的填充方式

background 设置背景，把以上所有的设置全部设置在一个属性中

4、列表属性：

list-style-image： 将列表设置为列表标识

list-style-type： 设置列表的标识类型，disc实心圆，circle空心圆，

square正方形

list-style： 把以上所有的设置全部设置在一个属性中

5、超链接的伪类

a:link{ 未访问的链接

color:#F00;

}

a:visited{ 已访问的链接

color:#6F6;

}

a:hover{ 鼠标悬浮改变样式

color:#FCC;

}

a:active{ 鼠标长按改变样式

background-color:#0FF;

}

6、cursor属性

url 设置自定义鼠标样式

default 默认光标

pointer 超链接的指针

wait 程序正在忙

help 指示可用的帮助

text 指示文本

crosshair 十字型

move 可移动指针

7、盒子模型

a、什么是盒子模型？

把相对应的元素放入到一个容器中，可以进行相对应的处理

移动或者处理这个盒子模型的同时，整个在盒子模型中的元素都会跟着

被处理。

边距：

内边距：

padding：top,left,right,bottom

外边距：

margin：top,left,right,bottom

b、浮动

什么是浮动？

其实原理就是align

浮动的属性：

left： 左浮动

right： 右浮动

none： 不浮动

clear属性： 清除浮动，both全部清除

c、overflow属性

当有元素溢出时，应如何处理

visible 默认的

auto 自动的

hidden 隐藏

scroll 加上滚动条

d、iframe标签

内联框架。

可以导入其他东西。