CSS学习基础(一)

一、CSS外框(Border)

1、示例

1 /*CSS文档*/
2
3 #d1
4 {
5     width:100px;
6     height:100px;
7     border:solid 1px red;
8 }
 1 /*HTML文档*/
 2
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6     <title>demo</title>
 7     <link href="css/demo.css" rel="stylesheet" />
 8 </head>
 9 <body>
10     <div id="d1"></div>
11 </body>
12 </html>

2、效果

3、CSS边框组合

#d1
{
       border:solid 1px red;
} 

内容相当于三个属性的组合。

#d1
{
      border-style:solid;
      border-width:1px;
      border-color:red;
} 

4、CSS边框border分四个属性边框

#d1
{
       border:solid 1px red;
}

border = border-top   +    border-left   +   border-right    +   border-bottom属性

#d1
{
       border-top:solid 1px red;
       border-left:solid 1px red;
       border-right:solid 1px red;
       border-bottom:solid 1px red;
}

二、设置网页背景(背景颜色)

Background-color

#d1
{
        background-color:#FF9;
        background-image:url(../image/12.jpg);
        background-repeat:no-repeat;
        background-position:10px 20px;
}        
时间: 2024-10-12 13:26:46

CSS学习基础(一)的相关文章

css学习基础详细(常用)

css简介 层叠样式表,可以修饰html 可以单独拿出来,直接做成css文件 通过单个样式表控制多个文档的布局 更为精确的布局控制 为不同的媒体类型(屏幕,打印等)采取不同的布局 无数高级,先进的技巧 可以活动更换网页风格 行内,内部,外部样式表 用html设置设置背景 <backgroupcolor="" > 用css设置 body{backgroup-color=""} 写行内扩展性不好,写行内也不好 单独拿出来,写成css文件 <html&g

CSS学习——基础分类整理

1. CSS 层叠样式表:Cascading Style Sheets,定义如何显示html元素 CSS规则:选择器{属性:值; 属性:值;} CSS注释:/*在这里写注释说明*/ 2. 选择器 #元素id 用元素的id属性来设置 .className 用html的class属性来设置 p.className p元素,且class="className" div p 后代选择器(空格分隔):div内的所有p div>p 子元素选择器(>分隔):div的直接子元素 div+p

css学习感言

在培训学校学习了一个多月了,最近主要讲的是css,准确的说老师上课讲css用了8天的时间,讲课的速度飞快,可能是对于我这种零基础的学生来说吧,感觉学起来很吃力,不过在这个过程中也学到了许多知识,这里主要介绍一下css中选择器权重的问题,css中选择器分为三类1.元素选择器2.类选择器3.id选择器4.通配符 ,这里主要介绍前三类. 元素选择器:例如table,input,button等他们分别表示一大类,称之为元素.它的权重是最小的,相当于日常生活中重量单位的一克.它是对一大类比如table,i

CSS的基础

今天学习了CSS的基础 学习到了三种引入方式,还有选择器的分类 引入方式,外联1:在/<head>中/<link rel="style sheet nyet"=<CSs文件路径> 内联2:在/<nead>中/<style>所需要的样式 内嵌3:在标签内部<p/ style="所需要的样式></p>

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

2天驾驭DIV+CSS (基础篇)(转)

这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区[知识三] 什么是W3C标准?[基础一] CSS如何控制页面[基础二] CSS选择器[基础三] CSS选择器命名及常用命名[基础四] 盒子模型[基础五] 块状元素和内联元素 实战篇[第一课] 实战小热身[第二课] 浮动[第三课] 清除浮动[第四课] 导航条(上) | 导航条(下)[大练习] 前四节课

CSS学习之菜鸟入门

一.基础学习 1.何为CSS CSS是Cascading Style Sheets(层叠样式表)的简称,是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语 言). CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀, 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以 她是每一个网页设计人员的必修课. 2.语法 2.1引用 链接式(href <head> <link rel="styl