首页 > 其他分享 >网页制作CSS

网页制作CSS

时间:2022-10-13 21:22:55浏览次数:49  
标签:网页 样式 text CSS background font 制作 css 样式表

 css基础知识

(一)css样式表的定义

(二)css样式表的语法 Pre标签 

(三)内部样式表

(四)外部样式表

(五)内联样式表

 

css样式表的定义 

css:(Cascading Style Sheets)层叠样式表;

分类及位置:内部样式-head区域style标签里面

  外部样式-link调用

  内联样式-标签元素里面

css内的注释:/*注释内容*/   //

 

CSS实际上就是一个样式文件,如颜色,加粗,间距,等,把这些样式放在一个文件中。

 

css样式表的语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

下面的示意图为您展示了上面这段代码的结构:例:ex01.html

       

h1{color:red;font-size:14px;}

三种颜色表示方法: 1.英文单词//

       2.#开头16进制6位数(两两相同可以缩写)

 

内部样式表

当单个页面需要设置样式时,就应该使用内部样式表。

使用 <style></style>标签在文档<head></head>里面定义内部样式表

<head>

<style type="text/css" >

p{color:red;}

</style>

</head>

 

内联样式[淘汰]

写在标签里面的样式

 

如:<p style=“color:red;”></p>

表示给p标签里面的文字颜色设置为红色

 

 

外部样式

当样式需要应用于很多页面时,就需要用到外部样式表,首先需要创建一个css文件,然后引用到我们的页面中。

<head>

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

</head>

 

课后作业:

1、制作一个网页,用三种不同的方法去控制html页面内的标签样式。 

 

 

css样式讲解【上】

css控制字体

一、color 控制字体颜色

1、十六进制值  #CC0066     #000

2、英文单词里颜色值  red  gray blue yellow

二、font-size 控制文字字体大小

font-size:12px;

三、font-family 控制字体的类型

font-family:"黑体"; font-family:"黑体";  /*常用字体类型为黑体,宋体,微软雅黑*/

 

四、font-weight 控制字体的粗细

 font-weight:bold;  

 font-weight:100;  normal正常

五、text-align 控制文字水平方向位置

1、left   水平距左  默认值

2、center 水平距中

3、right 水平距右

六、line-height  文字在竖直方向距中显示

line-height:25px;

    line-height:1.5; /*文字的行距倍数用的更多*/

七、text-decoration  向文本添加修饰

1、none 默认。定义标准的文本。

2、underline 定义文本下的一条线。

3、overline 定义文本上的一条线。

4、line-through    定义穿过文本下的一条线。

八、text-indent 缩进文本

1、em做单位 text-indent:2em;  1em代表一个汉字的距离

2、px做单位 text-indent:20px

3、百分比  text-indent:200%;百分数要相对于缩进元素父元素的宽度。

4、使用负值 text-indent:-2em;

九、letter-spacing字距

    letter-spacing:8px;字与字之间的距离;

十、overflow 文字超出内容区是表现形式

 

 

 

css样式讲解【下】

 

一、background-color 背景颜色

1、十六进制值  #CC0066     #000

2、英文单词里颜色值  red  gray blue yellow

二、background-image 添加背景图片

1、url("地址")  引用背景图片的地址

2、none  不使用背景图片

三、background-repeat 背景重复

1、no-repeat   不重复  只出现一张

2、repeat-x 水平方向重复

3、repeat-y 竖直方向重复

4、repeat 同时水平和竖直两个方向平铺   默认值

四、background-position 背景图片的位置

1、使用关键字:top、bottom、left、right 和 center  两两组合而成

2、一个对应水平方向,另一个对应垂直方向

 

备注:如果只出现一个关键字,则认为另一个关键字是 center

四、background-position 背景图片的位置

1、百分数值  (水平%   竖直%)

background-position:20% 30%;

备注:如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%

2、具体的值  (水平px   竖直px)

background-position:20px 30px;

五:background-attachment背景关联

1、 fixed 固定定位图片

2、 Scroll:背景图像随内容滚动。

六:background 综合样式控制

background:red no-repeat 2px 5px; background: url("") 背景颜色 重复 位置;

 

表格案例

1、border-collapse:collapse  为表格设置合并边框模型

 2、colspan="2"  表格单元横跨两列的表格

 3、rowspan="2" 表格单元横跨两行的表格

 

 

 

 

 

 

标签:网页,样式,text,CSS,background,font,制作,css,样式表
From: https://www.cnblogs.com/guyanleng/p/16789744.html

相关文章

  • 深入理解css 笔记(4)
    处理元素高度的方式跟处理宽度不一样。之前对border-box的修改依然适用于高度。而且很有用,但是通常最好避免给元素指定明确的高度。当明确设置一个元素的高度时,内容可能......
  • Tabby,一款老外都在用的 SSH工具,竟然还支持网页操作
    会编程的蜗牛主要分享java编程,也会涉及其他方向的技术分享。1篇原创内容公众号序言各位好啊,我是会编程的蜗牛,作为java开发者,或者说编程人员,程序员的我们,Linux服务器总......
  • 如何快速制作一个自己心目中的可视化大屏?
    遇到过不少朋友问:我从来没有接触过可视化的软件,也没有什么基础,我应该怎么开始学习可视化呢?其实很简单,现在市面上有很多公司研发的可视化软件/编辑网站已经不再像过去一样......
  • 我为什么喜欢原子化CSS
    用Unocss已经有几个月了,从使用者的角度来说说我为什么喜欢上了原子化css。类似“原子化css”的概念其实很早之前就有,比如Bootstrap的css工具类已经很接近现在的原子化css......
  • css面试点总结2
    css面试点-@import与link的详解css面试点-position属性css面试点-CSS预处理器(Sass/Less/Postcss)css面试点-css3的filter详解......
  • css面试点总结一
    css面试点-css盒子模型css面试点-flex布局,css3弹性盒子模型css面试点-BFC(块级格式化上下文)与常见布局方案css面试点-css层叠上下文css面试点-div居中方法(共8种)css面试点-清......
  • css面试题大全(持续更新)
    介绍一下css的盒子模型?​css盒子模型详解css选择符有哪些?css3新增伪类有那些?​元素选择符与关系选择符属性选择符伪类选择符,CSS3新增伪类伪对象(伪元素)选择符css那些属性......
  • 手机网页调试工具-兼容IOS与安卓
    最近在开发微信公众号网页的时候,由于手机端的各种不适配或者机型的问题出现了很多莫名其妙的bug,但这些bug只会在固定的机型或者部分手机复现,电脑端调试以及大部分手机都是没......
  • CSS——下拉菜单
    1.下拉菜单通常使用在鼠标过程中,当鼠标悬停是出现一个下拉的菜单。2.使用任何元素打开下拉菜单内容,例如<span>或<button>元素3.使用容器元素<如div>创建下拉内容,并在......
  • css面试点-css层叠上下文
    什么是层叠上下文层叠上下文(​​stackingcontext​​​),是​​HTML​​​中一个三维的概念。在​​CSS2.1​​规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴,Y轴以......