前端基础之CSS属性】的更多相关文章

CSS属性操作 1.文本 文本颜色:color,颜色属性被用来设置文字的颜色,颜色是通过CSS经常指定的,其格式有: 1.十六进制:#FF0000: 2.RGB值:RGB(255,0,0): 3.颜色名称:red: 水平对其方式:text-align属性规定元素中的文本的水平对齐方式: 1.left:文本排列到左边:默认值:由浏览器决定: 2.right:文本排列到右边: 3.center:文本排列到中间: 4.justify:文本两端对齐: 文本其他操作: text-align:center…
一.背景属性 <style> p { /*背景颜色*/ background-color: red; /*字体颜色*/ color: blue; /*宽度和高度*/ width: 600px; height: 600px; /*背景图片*/ background-image: url('hlw.png'); /*背景重复*/ background-repeat: no-repeat; /* repeat(默认):背景图片平铺排满整个网页 repeat-x:背景图片只在水平方向上平铺 repea…
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2.一条或多条声明:如下所示: selector { property: value; property: value; property: value; property: value; ... } 例如: h1 {color:red; font-size: 14px;} CSS的四种使用方式 1.行…
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二.css语法 2.1css实例 每一个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. 2.2 CSS注释 /*这是注释…
目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 浮动 定位 是否脱离文档流 溢出属性 z-index属性 透明度 练习 前端基础之CSS css简介 # 层叠样式表>>>:就是给HTML标签修改样式 语法结构 选择器 { 属性名1:属性值1; 属性名2:属性值2 } 注释语法 /*注释内容*/ 引入方式 1.style内部直接编写css…
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. 我的理解是:浮动将元素‘上浮’一层,并保留元素在上层对下层的投影的位置. 请注意: 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动. 一个浮动元素会尽量向…
clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                                              一.css 语法形式:                                                  二.使用步骤   1.引入css规则 2.使用css选择器 查找html标签: 3.利用css属性 设置html标签的样式:…
品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电商网站,我们要完成首页.列表页.详情页.注册页面的制作 2. 项目背景 现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需要的技术也是较为复杂 的, 复习.总结.提高前面所学布局技术. 3. 设计目标 保证浏览器 ie7及以上, 火狐, 360, safari,chrom…
1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 接下来我们要讲一下为什么要使用CSS. 1.1 HTML的缺陷 不能够适应多种设备 要求浏览器必须智…
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这是注释*/ 注释是代码之母.--摘自哪吒语录 CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. <p style="color:…
css学什么?? 主要学习选择器和属性,选择器是去找到标签的位置,属性是给标签增加需要的样式. CSS选择器 1.基本选择器: 1.标签选择器 2.ID选择器 3.类选择器(class="c1 c2  ...") 2.通用选择器(*) 3.组合选择器 1.后代选择器(空格) 2.儿子选择器(>) 3.毗邻选择器(div+p) 用的时候感觉有点问题 4.弟弟选择器 (~) 4.属性选择器 1.[s9] 2.[s9="hao"] 3.其他不常用的 5.分组和嵌套…
CSS 语法 .clearfix:after{ content: ""; display: block; clear: both; } 解决 float 块之后的塌陷(后面增加了一个空的,属性是clear:both的块) CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; ... property: value } 例如: h1 {color:red; font-size:14px;}…
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.l 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这是注释*/ 没有注释的话会,代码的可读性会非常差,后期做改动的话会非常麻烦. CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. <p style=…
浏览目录 CSS介绍 CSS语法 CSS的几种引入方式 CSS选择器 CSS属性相关 一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二.CSS语法 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. 注释格式: /*这是注释*/ 三.CSS的几种引入方式 1.行内样式 行内样式是在标记的style属性中设定CSS样式.不…
border  css属性 边框颜色 border-color:red/#ffffff/rgb()默认为黑色 边框样式 border-style:solid (实线) dashed (虚线).默认为none 边框粗细 border-width:1 Border的简写  border:border-width  border-style border-color: Div块  盒子 1.就是标签名.没有特殊的标签属性 2.主要用来排版布局 3.宽度是100%, chrome浏览器默认有8px的外边…
1.CSS属性: 透明属性(值越大越不透明): IE:filter:alpha(opacity:30) Google:opacity:0.3 层次属性(值大的会在上面): z-index:100 2.JS方法: 获取CSS属性: IE:obj.currentStyle[attr] Google:getComputedStyle(obj, false)[attr]…
一.CSS语法 CSS规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ... property: value } ''' 例如: h1 {color:red; font-size:14px;} 二.CSS的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式,这种方式没有体现CSS的优势,不推荐使用. <p style="background-color: rebe…
品优购项目(三) 1. 首页制作 1). 楼层区 floor 注意这个floor 一个大盒子 包含, 不要给高度,内容有多少,算多少 2). 家用电器模块 这个模块 简单 不需要写样式 版心居中对齐 因为这些模块 基本相同,下面的 模块基本用这些样式 所以 咱们下面两个盒子的命名是: 1号盒子 box-hd 给一个高度, 有个下边框 里面分为左右2个盒子 2号盒子 box-bd 不要给高度. 3). box-hd 模块 有高度 左边 h3 盒子 右边 div 命名为 tab-list 因为用到…
一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性:vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shadow:文本阴影效果 white-space:空白符的处理 unicode-bidi:设置文本的方向 3.盒子模型的属性:width,height,margin,margin-top,margin-right,margin-bottom,margin-left,border,border-style,b…
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: 3.…
css  介绍 css 规则有两个主要的部分构成 : 选择器  , 以及一条或多条声明. 现在的互联网前端分为三层 : ● HTML :超文本标签机语言,从语义的角度描述页面结构. ● CSS : 层叠样式表 , 从审美的角度负责页面样式. ● JS : JavaScript . 从交互的角度描述页面行为. CSS : Cascading Style Sheet , 层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果 , 简单的说 : CSS将页面内容和显示样式进行分…
1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.我们在这里重点讲标准模型. 1.1 盒模型示意图 1.2 盒模型的属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离,padding的区域是有背景颜色的.并且背景颜色和内容的颜色一样.也就是说background-color这个属性将填充所有的borde…
HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{ transform: rotate(0deg); } 二.三角 代码演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&…
原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. 书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text…
一.form表单 在form表单有两个重要的属性分别是:               关于表单两个属性: name: 作为发送server端的数据的键                                                value:作为发送server端的数据的值 标签嵌套原则: 块级标签可以嵌套 块级.内联  但是内联只能嵌套内联标签 二.css的引入方式: 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p…
前一篇写了我们的Html的常用组件,当然那些组件在我们不去写样式的时候都是使用的浏览器的默认样式,可以说是非常之丑到爆炸了,我们肯定是不能让用户去看这样丑到爆炸的样式,所以我们在这里需要使用css样式来美化一下前面的组件,让我们的页面更美观. 在开始css这部分之前,我们需要先在此着重提一下div这个标签,div标签在网页的标准化布局上起到了决定性的因素,我们通过使用div+css,可以完美的让我们的每个组件去到它自己应该去的地方. <div></div> 我们在学习css样式前,…
1  背景相关 背景颜色 background-color     = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 background-repeat   = repeat-x(仅水平平铺)  repeat-y(仅垂直平铺)  no-repeat(不平铺) 设置背景图片位置 background-position = 数字+单位/center/top/bottom/left/right   同上.  例如:50px 50px…
1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣),基本上所有的HTML页面都或多或少的使用了CSS.    CSS在页面中存在的三种方式:元素内联.页面嵌入和外部引入(语法:style='key1:value1;key2:value2;')    (1)标签内联:在HTML标签中使用 style='属性:属性值;'    (2)页面嵌入: <st…
css 介绍 css(层叠样式表)定义如何显示html 元素 当浏览器读到一个样式表, 他就会按照这个表对文档进行格式化(渲染) css语法 css实例 css 注释 注释是代码之母 /* 这是注释*/ css的几种引入方式 行内样式 行内式 是标记的的style属性中设定的css样式.不推荐大规模使用. <p style ="color :red"> 内部样式 嵌入式是将css样式集中卸载网页的<head></head>标签对的<style&…
文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 让元素脱离文档流的方法有:浮动和定位. 在 CSS 中,我们通过 float 属性实现元素的浮动 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存…