web从入门开始(7)-----css

CSS的语法格式

l  一个CSS规则,有“选择器”和“格式声明语句”构成

l  选择器:就是选择HTML标记,换句话说就是给那个HTML标记加样式

l  格式声明语句:由{ }构成,{ }中是各种格式语句。

l  一条格式语句,由“属性名:属性值”构成。

l  每一条格式语句,必须用英文下的“;“构成

l  属性名,就是CSS中的各种属性,这些属性名都是固定的

l  属性值:一个属性名可以去不同的值,这个值是不加引号的。

l  CSS中的数字单位,都是PX,这个PX 不能省略。

选择器

  1. 基本选择器

    1) “*”选择器:通配符

      l  描述:将匹配所有的HTML标记,所有的标记都会改变

      l  语法:*{ color:red;}

      l  注意:”*”尽量少用,因为IE6不支持

      

    2) 标签选择器

      l  描述:将匹配指定的HTML标记

      l  语法:匹配标记{ 属性 }

      例如: p{ color:red ; } 所有的p标记会变

      l  注意:CSS标签选择器,与HTML标记名称一样,但是不能加尖括号

    3) class选择器(类选择器)

      l  描述:给一类HTML标记加样式,这里所指的“一类”是:每一个HTML标记都有一个class属性,并且class的值都一样。Class属性是公共属性,每个HTML标记都有

      l  语法:.class名称{属性}

      例如:.myClass{ color:red;}

      l  注意:类选择器的名称必须以”.”开头,后跟HTML标记的class属性的值,

      l  HTML标记的class属性的值,不能以数字开头

给每个标记添加属性class并指定其名称,所有同名称class标记都会改变

    4) Id选择器-----实际应用中,是基本不使用的

      l  描述:是给指定id 的冤死添加样式的

      l  注意:网页中,不能存在多个同名的id 属性,值必须是唯一的

      Id属性也是公共属性,每个HTML标记都有一个公共属性

      ID属性一般是给JS使用的,不是让你来加样式的clss属性只能给CSS用,不能给JS用

      ID选择器的名称,必须以“#”开头,后跟HTML标记的ID 属性的值

  1. 组合选择器

1) 多元素选择器

  l  描述:给多个元素加同一个样式,多个选择器之间用“,”隔开。

  l  举例:h1,p,div,body{ color:red;}

   H1,p, .class{color:red;}

2) 后代元素选择器

  l  描述:给某个标签的某个后代元素加样式,选择器之间用“空格”隔开。

  l  举例:div .title{ color: red;}

可以增加前缀 die h1.title{ color:red;}

后面的标记,必须存在于前面标记的里面

3) 子元素选择器

  l  描述:只给某个标签的某个儿子元素加样式

  l  举例:div>.title{ color: red;}

CSS注释

CSS注释:/*注释内容*/

HTML注释;<!-HTML注释-->

CSS尺寸属性

width:元素宽度,一定加px单位

height:元素高度

margin:50px auto;    移动边框实现居中,50px代表上下的距离,auto为左右距离,表示左右居中

CSS字体属性

font – size:文字大小: 如:font – size :14px

font – family:字体: 如:font – family:黑体

font – style:斜体 取值:italic

font – weight: 粗体 取值bold 如:font- weight:bold

CSS文本属性

color :文本颜色

text – decoration :文本修饰线,取值none(无),underline(下划线),overline(上划线),line-through(删除线)

text – align:文本的对齐方式,取值:left,center,right

line – height:行高,可以用固定值,也可以用百分比

text – indent:首行缩进:

letter-spacing:字间距

CSS伪类选择器:给超链接加样式

一个超链接有4个状态:

正常状态(:linkl):鼠标没放上之前

放上状态(:hover):鼠标放到链接上时的样式

激活状态(:active):按住鼠标左键不松开时的样式

访问后状态(:visited):链接被打开过后的状态

在平常生活中,会使用下面写法,给链接加不同的样式

//将正常状态和访问过状态合二为一;

CSS列表属性

list -style:列表样式,取值:none.去掉项目符号前面的符号

CSS边框属性:每个元素都可以加边框线

border-left:左边框线。

格式 border-left: 粗细 线型 线的颜色

线型:none(无线),solid(实线),dashed(虚线),dotted(点状线)

border -right:右边框线

border -top:上边框线

border -bottom:下边框线

border:同时给所有边框加线

CSS内边距属性:边框线到内容间的距离

注意:平常我们所说的width和height属性,他们指的宽度和高度,不含内外边距,边框线

Padding-left

Padding-right

Padding-top

Padding-bottom

缩写形式:

Padding:10px     四个边的内填充分别为10px

Padding:10px 20px;表示上下为10px 左右为20px

Padding:5px 10px 20px;表示上为5px,左右10px,下为20px

Padding:5px 10px 15px 20px; 顺序为上右下左

CSS外边距属性:边线往外的距离---------margin

CCS背景属性

background-color:背景颜色

background-image:背景图片  例:background-image:src:图片地址

background-repeat:背景平铺方式  取值:no-repeat(不平铺),repeat-x(水平平铺),repeat-y(垂直平铺)

background-position:背景定位

l  格式:background-position:水平方向定位   垂直方向定位

l  Background-positio:50px  50px//背景距离容器地方左边50px,容器顶端50px

l  百分比定位:background-position:50% 50%

简写方式

background:背景色  背景图  平铺方式  定位方式

CSS浮动和清除

float:让元素浮动   取值:left(左浮动),right(右浮动)

:清除浮动   取值:left(清除左浮动),right(右浮动)

意义:所谓浮动相当是把元素上升了一层空间,他不占用原来空间的位置

作用:浮动的所有元素是以单个的个体出现的

所以就解决了一个功能,就是把所有的块元素并列显示(正常下,一个块元素是占用一行的)

CSS继承性

外层元素的样式,会被内层元素尽心国际城。多个外层元素的样式,最终会叠加到内层上

CSS优先级

行内样式>ID选择器>class选择器>标签选择器

 

时间: 2024-08-26 01:38:52

web从入门开始(7)-----css的相关文章

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

Web开发入门学习笔记

公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本<细说PHP>,先跟着过一遍Web开发入门. HTTP协议 HTTP协议:所有的WWW文件都必须遵守HTTP协议,HTTP是客户端浏览器或者其他程序与Web服务器之间的应用层通信协议.HTTP协议建立在TCP/IP协议,也就是说,是一种可靠的传输协议,意味着两台设备在传输之前必须先建立可靠连接(握手),由客户端发起到服务器端的指定端口(默认为80)HTTP请求,并

Web前端入门学习(2)——HTML常用标签

HTML标签 a标签 a标签是一个超链接标签,用于从一个页面链接到另一个页面.在<Web前端入门学习(1)>有提到过4个伪类,分别是a:link.a:visited.a:hover.a:active. a:link代表的是未访问过的链接,当访问者首次打开网页未点击链接时,所表现的形式: a:visited代表的是访问过的链接,相对于link,是访问者点击了连接后,所表现的形式: a:hover代表的是当鼠标经过链接上面时所表现的形式,鼠标经过后,链接会有所变化: a:active代表的是当用户

Web前端入门学习(5)——浮动原理及清除浮动

浮动原理及清除浮动 上节回顾 在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/1863945),介绍了块级元素和行内元素的特征,及粗略介绍了如何进行转换.加上display属性,可以指定元素的类型,如display:block.display:inline,以及display:inline-block.当然用得最多的是最后一个display:inline-block.结合例子来看: 例

web前端入门:一小时学会写页面

一小时学会写页面 作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法.既然题目已经定了一个小时那么废话就不多说了,计时开始 1.什么是前端 简单来说,前端就是做网页(大神勿喷,本文一切从简) 2.前端技术 html,是首字母缩写,具体意义请百度,大家要记住“t”代表text,ok你们没有想错,text就是文本文件text,好了准备工作做好了,现在开始做网页 3.我们的第一个网页 请身边有电脑的小伙伴和我一起开始,在桌面鼠标

PHP Web开发入门流程

在学习WEB开发前,至少有一个对C或者计算机编程任何一种语言的基本学习,这会对你以后的开发有一定的启蒙作用. 一.Web开发入门 推荐学习网址: http://www.w3school.com.cn/ http://www.imooc.com/   //慕课网 这两个是笔者最开始学习的网址,上面囊括了HTML/CSS/JAVASCRIPT/PHP/MYSQL等许多基础知识. 前一个适合直接看代码学习,很快也稍微枯燥 第二个网址适合喜欢老师讲解的类型 这种类型的网站有很多,如果可以科学上网的话,那

构建基于JAVASCRIPT的移动WEB CMS入门——简介(转载)

构建基于JAVASCRIPT的移动WEB CMS入门——简介 发布时间:2014-07-17 14:16:18.035763 看到项目上的移动框架,网上寻找了一下,发现原来这些一开始都有.于是,找了个示例开始构建一个移动平台的CMS——墨颀 CMS,方便项目深入理解的同时,也可以自己维护一个CMS系统. 构建框架 尝试过用AngularJS和EmberJS,发现对于使用AngluarJS以及EmberJS来说,主要的问题是要使用自己熟悉的东西没那么容易引入.而且考虑到谷歌向来对自己的项目的支持不

web前端入门与java入门

关于web前端入门一.软件结构划分1.C/S结构:Client(客户)-Server(服务器)之间的交互.特点:客户端的软件必须升级才能使用服务器高版本的功能.例如:阿里巴巴等.2.B/S结构:Browser(浏览器)-Server(服务器)之间的交互.特点:浏览器端的软件无需特定的升级就可访问服务器端的网站.例如:网易新闻等.JavaWeb/EE均基于B/S结构.二.网站基本认识基于B/S结构的应用都叫网站.组成:由很多的html标签组成.三.W3C组织规范了html.css.js(javas

Web API 入门指南 - 闲话安全

参考页面: http://www.yuanjiaocheng.net/Spring/first.html http://www.yuanjiaocheng.net/entity/modelbrowser.html http://www.yuanjiaocheng.net/entity/dbcontext.html http://www.yuanjiaocheng.net/mvc/first.html http://www.yuanjiaocheng.net/webapi/first.html W

System.Web.Routing入门及进阶 下篇

上面介绍的是最简单的一种定义方式.当然我们可以建立更复杂的规则.其中就包括设定规则的默认值以及设定规则的正则表达式. UrlRouting高级应用 预计效果: Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->当我访问/a/b.aspx时就会转到Default.aspx?category=a&action=b在页面上显示category:aac