资讯专栏INFORMATION COLUMN

HTML css

cfanr / 302人阅读

摘要:是的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。此元素会被显示为内联元素,元素前后没有换行符。本例中的样式表把段落元素设置为内联元素。

CSS 是 Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。

css 有四种引入方式

一,行内式:

hello

二, 嵌入式
嵌入式是将CSS样式集中写在网页的标签对的标签对中。


    
    Title
    

三, 链接式
将一个.css文件引入到HTML文件中, 推荐使用

四, 导入式
将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件, 

css 的选择器

*                 # 通用元素选择器,匹配任何元素 
E                  # 标签选择器,匹配所有使用E标签的元素
.info和E.info      # class选择器,匹配所有class属性中包含info的元素
E,F                # 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
E F                # 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
E > F              # 子元素选择器,匹配所有E元素的子元素F
E + F              # 毗邻元素选择器,匹配紧随E元素下面的同级元素F



    
    Title
    


hello p

hello dive hello span

p2 .....

p3 .....

p4 .....

div3

效果


E[att]          # 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)
E[att=val]      # 匹配所有att属性等于“val”的E元素 
E[att~=val]     # 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
E[attr^=val]    # 匹配属性值以指定值开头的每个元素 
E[attr$=val]    # 匹配属性值以指定值结尾的每个元素
E[attr*=val]    # 匹配属性值中包含指定值的每个元素

例子:




    
    Title
    




div1
div2
div3
di

效果:


a:link       # 没有接触过的链接, 用于定义了链接的常规状态。
a:hover      # 鼠标放在链接上的状态, 用于产生视觉效果。
a:visited    # 访问过的链接,用于阅读文章, 能清楚的判断已经访问过的链接。
a:active     # 在链接上按下鼠标时的状态, 用于表现鼠标按下时的链接状态。

E:before     # 在对应的元素之前插入内容
E:after      # 在对应的元素之后插入内容

例子:




    
    Title
    


百度

klvchen

效果:

RGB颜色对照表

https://www.114la.com/other/rgb.htm




    
    Title
    


hello world

外边距和内边距

margin            # 用于控制元素与元素之间的距离(外边距);
padding           # 用于控制内容与边框之间的距离(内边距);   
border            # 围绕在内边距和内容外的边框(边框);
content           # 盒子的内容,显示文本和图像;

一个元素的宽度 = content 宽度 + border*2 + padding*2
一个元素的高度 = content 高度 + border*2 + padding*2

练习: 300px300px的盒子装着100px100px的盒子,分别通过margin和padding设置将小盒子 移到大盒子的中间

# 使用 margin



    
    Title
    



# 使用 padding Title

display

# display 的值
inline        : 默认。此元素会被显示为内联元素,元素前后没有换行符。
block         : 此元素将显示为块级元素,此元素前后会带有换行符。
none          : 此元素不会被显示。
table-cell    : 此元素会作为一个表格单元格显示。
inline-block  : 将元素显示为行内块状元素,设置该属性后,其他的行内块级元素会排列在同一行。



    
    Title
    


    

本例中的样式表把段落元素设置为内联元素。

而 div 元素不会显示出来!

div 元素的内容不会显示出来!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1396.html

相关文章

  • HTML中使用CSS

    摘要:一前言在中使用,包括内联式内嵌式链接式和导入式。链接式使用时需要在标记中使用标记,通过标记的相关属性指明外部文件的路径,以方便找到其中定义的样式并运用在当前网页元素上。导入式通过在标记的标记中使用方法导入相应的文件。 一、前言 在 HTML 中使用 CSS,包括内联式、内嵌式、链接式和导入式。 二、分类 2.1 内联式 内联式是所有样式应用方式中最为直接的一种,它通过对 HTML 标记...

    andong777 评论0 收藏0
  • HTML中使用CSS

    摘要:一前言在中使用,包括内联式内嵌式链接式和导入式。链接式使用时需要在标记中使用标记,通过标记的相关属性指明外部文件的路径,以方便找到其中定义的样式并运用在当前网页元素上。导入式通过在标记的标记中使用方法导入相应的文件。 一、前言 在 HTML 中使用 CSS,包括内联式、内嵌式、链接式和导入式。 二、分类 2.1 内联式 内联式是所有样式应用方式中最为直接的一种,它通过对 HTML 标记...

    chengjianhua 评论0 收藏0
  • [译]HTML&CSS Lesson1: 构建第一张页面

    摘要:元素是使用小于号和大于号包裹元素名来标示。一个结束标签表示元素的结束它由小于号元素名组成例如。和嵌套在内,它们页面中都是可视的。使用选择器类型选择器类型选择器也叫作元素选择器根据元素类型选择元素。 可以的话,请想象一下互联网没有发明之前的日子。网站还不存在,纸质的书本是我们主要的信息来源,而在书本中查询我们想要的资料会耗费相当多的精力和时间。 而如今,你打开个浏览器用搜索引擎搜索,任...

    X_AirDu 评论0 收藏0
  • [译]HTML&CSS Lesson1: 构建第一张页面

    摘要:元素是使用小于号和大于号包裹元素名来标示。一个结束标签表示元素的结束它由小于号元素名组成例如。和嵌套在内,它们页面中都是可视的。使用选择器类型选择器类型选择器也叫作元素选择器根据元素类型选择元素。 可以的话,请想象一下互联网没有发明之前的日子。网站还不存在,纸质的书本是我们主要的信息来源,而在书本中查询我们想要的资料会耗费相当多的精力和时间。 而如今,你打开个浏览器用搜索引擎搜索,任...

    LuDongWei 评论0 收藏0
  • #WEB安全基础 : HTML/CSS | 文章索引

    摘要:黑体本系列讲解安全所需要的和黑体安全基础我的第一个网页黑体安全基础初识黑体安全基础初识标签黑体安全基础文件夹管理网站黑体安全基础模块化黑体安全基础嵌套列表黑体安全基础标签拓展和属性的使用黑体安全基础嵌套本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基...

    EscapedDog 评论0 收藏0
  • webpack4初学习

    webpack基于node,因此想要学习webpack首先要安装node。webpack4要安装node8.2以上版本。 1、安装webpack 为什么选择本地安装,主要是由于以后介绍热更新这一部分不会报错,如果全局安装热更新就会报错,以本部分为基础依次介绍,保证各部分不会出错。 mkdir webpack-test cd webpack-test npm init //初始化npm,都选择默认,...

    Object 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<