前端开发之css

<!--页面中的组成部分通常随便打开一个网页,有文字,图片,视频,表格,音频,表单(注册信息)

css 属性/尺寸/边框/背景

1.css的尺寸属性,就是大小width max-width min-widthheight max-height min-height

2.css的边框属性border-style 边框风格            none:无边框。 border-color和boder-width都将被忽略            hidden:隐藏边框。            dotted:点状边框。            dashed:虚线边框。            solid:实线边框。            double:双线边框。两条单线与其间隔的和等于指定的border-width的值。            groove:3D凹槽轮廓。            ridge:3D凸槽轮廓。            inset:3D凹边轮廓。            outset:3D凸边轮廓。

border-color 边框颜色border-width 边框宽度

3.内边距属性padding-left: 20px; 左边距padding-top: 50px;  上边距padding-right: 100px;右边距padding-bottom: 150px;下边距

/*复合属性*/padding: 值; 上下左右

/*padding: 20px;*//*padding: 20px 40px;*/   上下 左右/*padding: 20px 40px 60px;*/  上 左右 下padding: 10px 20px 30px 40px; 上 右 下 左

4.css背景属性

-->

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>张仁国杨静结婚啦</title>    <style type="text/css">        .item {            /*设置元素的宽高*/            /*width: 300px;*/            /*max-width: 300px;*/            /*min-width: 300px;*/            width: 600px;            /*height: 400px;*/            /**/

/*border 边框*/

border-style: solid;            border-color: #f90;            border-width: 1px;

/*复合属性*/            /*border: 2px solid red;*/

/*内边距  padding*/            padding-left: 20px;            padding-top: 50px;            padding-right: 100px;            padding-bottom: 150px;

/*复合属性*/            /*padding: 20px;*/            /*padding: 20px 40px;*/            /*padding: 20px 40px 60px;*/            padding: 10px 20px 30px 40px;

}

</style></head><body>    <h1>CSS的尺寸属性 边框属性 内边距</h1>    <hr>

<div class="item">        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam consectetur corporis dolorum, earum eos et explicabo fuga harum id itaque maiores nam nobis possimus quasi ratione suscipit totam vitae?    </div>

</body></html>

原文地址:https://www.cnblogs.com/zhangrenguo/p/10080934.html

时间: 2024-07-28 13:27:10

前端开发之css的相关文章

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

前端开发之css篇

一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.css的引入方式 (1)行内式引入: <div style="color:red;font-size: 16px">hello</div> 直接在html语句的属性中设置,这种方法的缺点是html代码和css代码混合在一起,耦合性太强,维护困难 (2)嵌入式引入: &

前端开发之CSS篇一

一.CSS介绍和语法 二.CSS引入方式 三.基本选择器 四.高级选择器 五.伪类选择器 六.伪元素选择器 1??  CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力.而此时CSS就出现了. CSS的出现解决了以下问题: 首

前端开发之CSS篇三

一.CSS布局之浮动 二.清除浮动带来的问题 三.margin塌陷问题和水平居中 四.善用父级的的padding取代子级的margin 五.文本属性和字体属性 六.超链接美化 七.背景属性(颜色.图片.位置)   1??  CSS布局之浮动 float:即浮动,CSS布局用得最多的一个属性. 效果:元素并排,并且两个元素都能够设置宽度和高度. 要想学好必须要知道的四个特性: (1)浮动的元素脱标: (2)浮动的元素互相贴靠: (3)浮动的元素有“字围“效果: (4)紧凑的效果 1.元素脱标 脱离

移动平台前端开发之WebApp代码技巧

1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web

高效Web前端开发之路:YUI 3.15 PDF扫描版

JavaScript是一种最初由Netscape的LiveScript发展而来的面向对象的Web脚本语言,被ECMA国际定义为国际化标准--ECMAScript.JavaScript具有使用局限性.在Web方面,其必须与各种DOM技术结合才能发挥作用.因此,一些具有开拓创新精神的开发者们便开发出了各种丰富的第三方框架,通过第三方的支持代码实现浏览器兼容性的统一.代码的简化以及功能的增强. <高效Web前端开发之路:YUI 3.15>作者便是在此背景下,以国外最优秀的JavaScript框架之一

前端开发之html基础知识02

经典表格:表格没有列的概念,只有行的概念, 一行 tr,行中的单元格 td表头的突出显示:tr>th <table width="400px" align="center" border="1px" cellspacing="0" cellpadding="5px" > <!-- align = "center" 表格整体剧中--> <caption&

前端开发之HTML+css

之前看过一篇文章是再说HTML和CSS其实作用不大,是可以考虑删除直接用jsvascript直接来表现,当然他也给出了自己的观点和解释,让我们以前来看一下: 程序本质是数据结构和算法,HTML 和 CSS只能表达简单的树形结构,适合简单的内容型网站,不适合复杂的Web程序.以它们为核心的开发会:把简单变的更简单,但把复杂变的更复杂.石头搭得了石屋,不一定盖得了大厦. HTML和CSS的语言表达能力,用JavaScript的一个子集JSON(其实就是JavaScript对象和数组)就可以代替,但缺

我的IT梦——web前端开发之HTML,CSS(一)

HTML HTML全称HyperText Markup Language(超文本标记语言) 标签成对出现 <!DOCTYPE html>    文档类型定义 < >    标记||标签 charset=UTF-8    字符编码集,万国码 <head></head>    头部 <body></body>    内容 <!-- -->    注释 标题<h1></h1><h2></