42 |
您所在的位置：网站首页 › html美化a标签 › 42 |
42
|
## CSS：页面美化和布局控制 1. 概念： Cascading Style Sheets 层叠样式表 * 层叠：多个样式可以作用在同一个html《html就是标签》的元素上，同时生效 2. 好处：css和html都能控制样式 1. 功能强大 2. 将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作更容易 * 提高开发效率 3. CSS的使用：就是CSS与html结合， 方式有三种 1. 内联样式 《不推荐使用 》 作用域最小只能最用在当前的标签 * 在标签内使用style属性指定css代码 * 如：hello css 键值对 这里面color是属性名（键） red是属性值（值） 键和值用冒号隔开 多个键值对之间用分号隔开 Title hello css输出： 3. 外部样式 作用域：多个界面的div标签同时改变 1. 定义css资源文件。 css资源文件 这里也是新建的一个文件夹 文件名是 XXX.css 在里面写本来中的内容
@import "css/a.css"; Title href是属性 hello css hello css* 注意： * 1,2,3种方式 css作用范围越来越大 * 1方式不常用，后期常用2,3 * 第3种格式可以写为：可以不通过link标签引入用引入 @import "css/a.css"; Title @import"css/a.css"; hello css hello css4. css基本语法： * 格式： 选择器 { 属性名1:属性值1; //键值对 键和值用冒号 键值对之间用分号隔开 属性名2:属性值2; ... } * 选择器:筛选具有相似特征的元素 * 注意： * 每一对键值对需要使用；隔开，最后一对属性可以不加； 注意：这里要在head中加入link标签 或者style标签 Title hello css hello css呵呵 css资源文件 div{ color: green; } p{ color: red; font-size: 30px; }输出：
5. 选择器有哪些？：筛选具有相似特征的元素 * 分类： 1. 基础选择器 有三种 id 选择器 #xxx > 类选择器 .xxx > 元素选择器 div 注意：标签设置class可以重复 但是设置id值一定是唯一的 id选择器优先级最高 1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一 * 语法：#id属性值{} #div1表示选择id为div1的元素 Title #div1{ color: red; } 传智播客 黑马程序员
2. 扩展选择器： 1. 选择所有元素： * 语法： *{} 2. 并集选择器： * 选择器1,选择器2{} 选择器1逗号选择器2 表示同时选择这两个选择器 3. 子选择器：筛选选择器1元素下的选择器2元素 * 语法： 选择器1 选择器2{} 选择器1空格选择器2 ---》 表示选择器1元素下的选择器2元素 扩展选择器 div p{ color: red; }传智播客 黑马程序员
传智播客 黑马程序员
5. 属性选择器：选择元素名称，属性名=属性值的元素 * 语法： 元素名称[属性名="属性值"]{} 选择属性名等于属性值的元素 扩展选择器 input[type='text']{ border: 5px solid; } aaa
6. 伪类选择器：选择一些元素具有的状态 * 语法： 元素:状态{} * 如： 超链接标签 * 状态： * link：初始化的状态 * visited：被访问过的状态 * active：正在访问状态 * hover：鼠标悬浮状态 扩展选择器 a:link{color: pink} //注意后面不能加分号；否则会报错的 a:hover{color: green} a:active{color: red} a:visited{color: yellow} 传智播客
6. css的属性 1. 字体、文本 注意字体和文本的区别 字体属性说的是字的一些属性 文本是一段字的属性 所以字体有大小 文本有对齐方式 行高 * font-size：字体大小 * color：文本颜色 * text-align：对其方式 * line-height：行高 这里是标签的行高
background: url("img/logo.jpg") no-repeat center; 解释 ： background:url（“图片地址”） no-repeat不重复 center 居中 3. 边框 * border：设置边框，复合属性 四条线组装一个边框 每条线都可以分开放置 4. 尺寸 * width： 设置元素的宽度 * height：设置元素的高度 注意 ： css中注释只能用 /* */这种多行注释 字体属性 p{ color: red; font-size: 30px;/*字体大小 */ text-align: center;/*内容居中*/ line-height: 200px;/* 行高度*/ /* border边框 宽度 实线 红色 这里指的是边框的宽度颜色实线 */ border: 100px solid red; } div{ /* 尺寸 注意这里的background在大括号里面 只是一个背景上面还能加字 */ border:1px solid red; height: 200px; width: 200px; background: url("img/logo.jpg") no-repeat center; }传智播客 黑马程序员
内外边距也要看视角不同来看 好比图中以红色为对象 则与外面大边框呢个是外边距margin 与里面小的算是内边距padding 所以内外边距是不定的，要看具体的视角 如果是另一个盒子就不是了 内外边距是一个相对的概念
1. 通过外边距来实现居中 margin: 50px; 其实这个要计算 如果不计算直接设置内外边距是不对的 这种情况要看四条边进行计算否则会变形 css和html结合 div{ border: solid 1px red; /*元素选择器 选择了两个div标签*/ } .div1{ width: 100px; height: 100px; margin: 50px; /* 注意整个边距看的是四个边 而且这是一个复合属性 可以分别设置盒子模型四个边的内外边距 margin-top bottom left right */ } .div2{ width: 200px; height: 200px; } 2. margin-left: 50px; 2.通过内边距实现居中 通过div2来设置 但是发现外面框变形了 注意：默认情况下内边距会影响整个盒子的大小 解决办法：设置盒子的属性 让height 和width就是盒子的大小 box-sizing: border-box; css和html结合 .div1{ width: 100px; height: 100px; border: solid 1px red; /* 注意整个边距看的是四个边 而且这是一个复合属性 可以分别设置盒子模型四个边的内外边距 margin-top bottom left right */ } .div2{ width: 200px; height: 200px; padding:50px; border: solid 1px blue; box-sizing: border-box; }
3. * float：浮动 : float:left right操作能让div在一行上 * left * right css和html结合 div{ border: red solid 1px; width: 200px; height: 20px; } .div1{ float: left; } .div2{ float: left; } .div3{ float: right; } aaaaaaaaaaaa bbbbbbbbbbbb cccccccccccc
|
2. 内部样式 作用域：该界面的div标签 * 在head标签内，定义style标签，style标签的标签体内容就是css代码 * 如： div{ color:blue; } hello css
2. 在head标签内，定义link标签，引入外部的资源文件 其实最方便是引入
2. 元素选择器：选择具有相同标签名称的元素 * 语法： 标签名称{} 例如例子中的div{ } * 注意：下面例子里传智播客是红色不是绿色 所以说id选择器优先级高于元素选择器
3. 类选择器：选择具有相同的class属性值的元素。 多个标签可以作用同一个class * 语法：.class属性值{} * 注意:类选择器选择器优先级高于元素选择器
4. 父选择器：筛选选择器2的父元素选择器1 * 语法： 选择器1 > 选择器2{} 选择器1大于号选择器2
border是边框
2. 背景 * background：
5. 盒子模型：控制布局 其实就是把一个一个边框想象成一个一个盒子来看 * margin：外边距 * padding：内边距
【本文地址】
今日新闻 |
推荐新闻 |