css基础--常用css属性02

上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1 浮动和清除浮动在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. 我的理解是:浮动将元素‘上浮’一层,并保留元素在上层对下层的投影的位置. 请注意: 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动. 一个浮动元素会尽量向…

css基础--常用css属性01

1 背景相关背景颜色 background-color = 颜色名称/rgb值/十六进制值背景图片 background-image = url('') 背景图片平铺方式 background-repeat = repeat-x(仅水平平铺) repeat-y(仅垂直平铺) no-repeat(不平铺) 设置背景图片位置 background-position = 数字+单位/center/top/bottom/left/right 同上. 例如:50px 50px…

HTML&CSS基础-常用选择器

HTML&CSS基础-标签的属性

HTML&CSS基础-标签的属性作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码  <html>  <head> <!-- title网页的标题标签,默认会显示在浏览器的标题栏中,搜索引擎在检索页面时,会首先检索title…

HTML&CSS基础-边框简写属性

CSS基础--常用样式

一.背景相关背景颜色 background-color :颜色名称/rgb值/十六进制值背景图片 background-image :url('') 背景图片平铺方式 background-repeat : repeat-x(仅水平重复) repeat-y(仅垂直重复) no-repeat(不重复) 设置背景图片位置 background-position : 数字+单位/center/top/bottom/left/right 同上. 例如:50px 50px 背景图片是否滚动 backg…

CSS基础-行快属性，hover

CSS基础 1.行快属性在css中有很多标签,分为行内标签,块标签,标签行内块标签,他们有着不同的属性. 块标签 div,ul,li,ol,h1~h6,p 可以设置宽高不可以与别人共处一行不设置宽度的时候,默认宽度是100% 行内标签 span,strong,a 不可以设置宽高可以与别人共处一行其宽高由内容撑开行内块标签 …

HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在style标签中. <style> color: red; 设置文本颜色 font-size: 30px; 设置文本大小设置背景颜色 background-color: blue; font-weight: bold; 设置文本粗体 font-style: italic; 设置文本斜体…

Html+CSS基础之CSS样式

认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ font-size:12px; color:red; font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体.字号或者颜色等. CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:…

一、HTML和CSS基础--HTML+CSS基础课程--第2部分

第三章与浏览器交互,表单标签使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据. 语法: <form method="传送方式" action="服务器文件"> 讲解: 1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束. 2.action :…

CSS基础（float属性与清除浮动）

3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧浮动语法:float:left | right | none 特点: 浮动的元素不占位置,脱离了标准文档流(页面中标签的默认显示方式就是标准流) 浮动的元素可以实现元素的模式互换同方向浮动的元素会顺次排列浮动的元素顶端对齐默认情况下,子元素浮动只会在父元素的区域之内(除非你刻意用margin把子元素弄出去) 父元素浮动会把子元素一起带跑浮动前面有标准流,会漂浮到标准流的后面值得注意的是:文字不…

css基础知识之属性选择器

css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css属性选择器</title> <style type="text/css"> [title]{ color:red; } [title=te]{ color:green; } /*~…

CSS、常用标签属性

div的样式:[width:宽度 :100像素.height:高度100px.background:背景颜色红色] 内嵌的形式:用<style type="text/css></style>把样式(div:id; third)样式圈在里面.注意要嵌在页面<head></head>的里面.#号id名称(third) 寻找id:third 外部的形式:单独的样式文件.<link>标签除了可以通过id 的样式寻找,还可以通过p标签进行元…

CSS 基础例子 display属性：block、inline和inline-block的区别

HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:display:block将元素设置成块级的,display:inline将元素设置成行级的. span的实际显示宽度和高度由其内容决定. 一.display:block的特点 1.block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. 2.blo…

HTML+CSS基础 border css属性 Div块盒子

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的外边…

CSS基础之浮动属性float图文详解

宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”. 标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:超脱!脱离标准流! 浮动是css里面布局用的最多的属性. 现在有两个div,分别设置宽高.我们知道,它们的效果如下:…

CSS基础阴影相关属性设置

一.字体阴影属性名:text-shadow:水平偏移量垂直偏移量模糊度阴影颜色: html代码: <div>农夫山泉有点甜</div>css代码: div{ font-size:100px; font-weight:700; text-align:center; line-height:300px text-shadow: 98px 79px 9px pink; /*水平偏移量垂直偏移量模糊度阴影颜色 */} 注意:1.水平偏移量可以为负数,模糊度和阴影颜色是可选的 2…

CSS基础定位相关属性的使用方法

1.相对定位:position:relative: 属性名:position 属性值:relative: 特点:1.相对自己的位置移动 2.配合方位名词移动,如:top.left.right,bottom 3.相对定位,位置虽然移动了,但原来的位置还在,并未脱标应用场景: 1.配合绝对定位使用(子绝父相) 2.小范围的移动使用 2.绝对定位:position:absolute: 特点:1.默认相对浏览器可视化区域的边缘移动,如果父级以及以上级有定位,则相对最近的一个级定位 2.配合方位名词移动…

CSS基础盒子相关属性总结 padding+border

1.border当个属性: 作用属性名属性值边框粗细 border-width 数字+px 边框样式 border-style solid实线.dashed虚线.dotted点线边框颜色 border-color 颜色设置连写格式:1.border:20px solid green: /*增加宽度为20px的四周边框颜色为绿色的实线 */ 2.border-top:10px solid blue: /* 增加10px的上边框颜色为蓝色的实线*/ 3.border-bottom:5px…

HTML+css基础 Text文本属性

Text文本属性: 1.颜色 color color:red 2.文本缩进 text-indent 属性值数字+px: text-indent:10px: 3.文本修饰 text-decoration 属性值:underline 下划线 none 默认值没有任何线 overline 上划线 4.文本的对齐方式 text-align 属性值 left right center justify(两端对齐) width 宽 height 高属性值都是像素任何一个标签都是以方格的形式呈现…

css不常用重要属性

超出省略号:display:block;white-space:norwrap;overflow:hidden;text-overflow:ellipsis; white-space:norwrap//强制不换行 overflow:hidden//超出不显示 text-overflow:ellipsis//文本溢出时显示的样式,此处表示以...代替超出文本…

css基础：样式属性

1.背景与前景:background-color::背景色,样式表优先级高. background-image:url(路径):设置背景图片 background-attachment:fixed:背景固定,不随字体滚动.scroll:背景随字体滚动. background-repeat:no-repeat:不平铺.repeat:平铺.repeat-x:横向平铺.repeat-y:纵向平铺. background-position:center 背景图居中,设置背景图时,top 上,left 左…

一、HTML和CSS基础--HTML+CSS基础课程--第5部分

第九章 CSS盒模型元素分类 : 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有:<div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素…

一、HTML和CSS基础--HTML+CSS基础课程--第6部分

第十一章 CSS代码缩写,占用更少的带宽盒模型代码简写 :还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在margin和padding的例子如下: margin:10px 15px 12px 14px;/*上设置为10px.右设置为15px.下设置为12px.左设置为14px*/ 通常有下面三种缩写方法: 1.如果top.right.bottom.left的值相同,如下面代码:marg…

一、HTML和CSS基础--HTML+CSS基础课程--第4部分

第七章 CSS的继承.层叠和特殊性继承:CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 特殊性 权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100. 注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低. 层叠 :我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办…

一、HTML和CSS基础--HTML+CSS基础课程--第1部分

第一章 HTML介绍 Html和CSS的关系 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下拉菜单.或鼠标滑过表格的背景颜色改变.还有焦点新闻(新闻图片)的轮换.可以这么理解,有动画的,有交互的一般都是用JavaScrip…