CSS/HTML 01-前端开发概况、代码入门

最新推荐文章于 2024-02-16 09:45:11 发布

Coisini、

最新推荐文章于 2024-02-16 09:45:11 发布

阅读量129

点赞数 1

分类专栏： CSS/HTML 文章标签： CSS/HTML 01-前端开发概况、代码入门 CSS/HTML

本文链接：https://blog.csdn.net/kclax/article/details/90750341

版权

CSS/HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述
CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。

示例：
<div style=”color:red;font-size:30px;”>style属性的应用</div>

<!–
行间样式写在标签的style属性
属性名=“属性值”
–>

二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例：

<head>
<meta charset=”utf-8″>
<title>无标题文档</title>
<head>
<style>
 #div1
{
          color:red;
         font-size:30px;
         }
</style>
</head>
<div id=”div1“>style属性的应用</div>

三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：

1、链接式
<link type=”text/css” rel=”styleSheet”  href=”CSS文件路径” />

2、导入式
<style type=”text/css”>
  @import url(“css文件路径”);
</style>

基本样式

单位（px像素）
width宽度
height高度

border 边框（集合样式）

border-width 边框宽度
1.border-top-width
2.border-right-width
3.border-bottom-width
4.border-left-width
border-style 边框样式 // solid实线 dashed虚线 datted点线
1.border-top-style
2.border-right-style
3.border-bottom-style
4.border-left-style
border-color 边框颜色 //关键字 RGB （，，,）十六进制（#）
1.border-top-color
2.border-right-color
3.border-bottom-color
4.border-left-color
#box{border:3px solid red;}无顺序要求
特殊值 none（没有边框）如：#box{border-left:none;}
同一个元素两边边框相交的地方是斜线

background背景

background-color 背景颜色
background-attachment:fixed背景图的位置定位
background-image背景图片 url(图片地址)
background-repeat 背景平铺
1.no-repeat 不平铺
2.repeat 平铺
3.repeat-x 水平平铺
4.repeat-y 垂直平铺
background-position 背景图定位

关键字如：background-position:left top;
x:

left 图的左侧和元素的左侧对齐
center 图的中间和元素的中间对齐
right 图的右侧和元素的右侧对齐

y：

top图的顶部和元素的中间对齐
center图的中间和元素的中间对齐
bottom图的底部和元素的中间对齐

*1 具体值如：background-position:20px 30px;

x：正值从左向右移动，负值从右向左移动
y：正值从下向上移动，负值从上向下移动

font文字

ont-size 文字大小
font-weight文字加粗（bold加粗/normal 正常）
font-style文字倾斜（italic倾斜/normal正常）
line-height 行高（文字在一行上下居中）
font-family 字体例如：font-family:”宋体”
————————————————- font:font-weight
font-style font-size/line-height font-family font: font-size
font-family 必须写
————————————————–
color 文字颜色
text-indent首行缩进(1em=1个文字大小)
text-align文本对齐方式（left/center/right）
tetx-decorayion文本修饰（under line 下划线/line-through 删除线/overline上划线/none ）
letter-spacing 字母间距（字间距）
word-spacing 词间距

padding内填充（padding在元素的边框以内，内容以外，padding同样显示元素的背景）

padding-top
padding-right
padding-bottom
padding-left
可视宽度：可视宽（高）=border+padding+width（height）

盒模型概念

盒子模型是样式表（css）控制页面的很重要的概念。如果理解了盒子模型和其中每个元素的用法，才能熟练使用css的定位方法和技巧。所有的页面的元素都可以看成是一个盒子，占据一定的页面空间。占据的空间要比实际使用的空间要大得多。我们可以调整盒子的边框和距离，来调整盒子（页面和页面中的元素）的位置。盒子模型是由内容、边框、间隙（padding）、间隔（margin）组成，他们的关系如下图所示：

在这里插入图片描述

Coisini、

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS/HTML 01-前端开发概况、代码入门

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。一、行内样式使用style属性引入CSS样式。示例：<div style=”color:red;font-size:30px;”>style属性的应用</div><!–行间样式写在标签的style属性属性名=“属性值”–>二、内部样式表在style标签中书写CSS代码。s...
复制链接

扫一扫