css笔记
2019-01-03 09:55:48来源:博客园 阅读 ()
注释: /* */
1、css和html的结合方式
(1)用(每个)html标签上的style属性结合
(2)使用html的<style>标签
(3)在style标签里使用语句 @import url(css文件路径);(某些浏览器不支持)
(4)使用头标签link引入外部css文件
2、css的选择器(* 代表所有)
(1)标签选择器
- 使用标签名作为选择器名称: 标签名{css属性}
(2)class选择器
- 每个html标签都有个class属性(可以有多个class属性,用空格隔开)
- - [标签].class名{css属性}
(3)id选择器
- 每个html标签都有个属性id
- - [标签]#id名{css属性}
(4)属性选择器
- 选择具有指定属性值的标签
- - 选择器[id='abc']{css属性}
优先级:
- style属性 > id选择器 > class选择器 > 标签选择器
3、css的扩展选择器
(1)关联选择器
- 指定嵌套标签里面的样式(标签1中的标签2)
- - 标签1 标签2{css属性}
(2)组合选择器
- 把不同标签设置成相同的样式
- - 标签1,标签2{css属性}}
(3)伪元素选择器
- css里面提供了一些定义好的样式,可以定义元素在不同条件下的样式
- 超链接(顺序不能变)
- 状态:原始状态(:link),鼠标放上去(:hover),点击还没释放(:active),点击后(:visited)
- - a:状态{css属性}}
(4)相邻兄弟选择器
- 标签1 + 标签2{css属性}
- 标签2紧邻标签1之后,有同一个父元素
4、css属性(冒号设置)
定位
- float:指出对象是否及如何浮动(可以使元素飘起来)(当浮动时必须指定宽)
- clear: 规定元素不被浮动元素覆盖(使普通元素不被浮动元素覆盖)
- display: 规定如何显示该元素(隐藏(不占位置),内联, 块状等)
- visibility: 规定元素是否可见(隐藏时占页面位置)
- position: 定位类型, 作用于 top 等属性
- 相对定位(相对于正常位置,原来的位置不会被其它元素占用),绝对定位(相对于父元素位置,不占用其它元素位置,会盖在其它元素上)等
- 用绝对定位时,父元素要有 position 属性,否则会一直向上找,直到body
- top: 设置相对于顶部偏移(buttom:下, left:左, right:右)
- z-index: 设置元素的堆叠顺序(当使用 绝对定位 时使用,当多个绝对定位元素重叠时,此值大的会在上面)
- overflow: 规定当子元素内容溢出时的处理
盒子
- margin: 外边距(margin-top:上,margin-right:右,margin-bottom:下,margin-left:左)
- padding: 内边距(内边距不算在元素大小中)(padding-top:上,padding-right:右,padding-bottom:下,padding-left:左)
- border: 设置边框属性(border-top:上...)(边框宽度不算在元素宽度中)
- 可设置的属性(可以直接设置用空格隔开,也可单独设置):
- border-width: 设置边框宽度, 当 border-style 不为 none 时有效
- border-style: 设置边框样式
- border-color: 设置边框颜色(red/#000000)
- 可设置的属性(可以直接设置用空格隔开,也可单独设置):
- border-radius: 设置圆角边框
- border-bottom-left-radius: 设置左下
- border-bottom-right-radius: 设置右下
- border-top-left-radius: 设置左上
- border-top-right-radius: 设置右上
- border-image: 将图片作为边框
- 可设置的属性(可以直接设置用空格隔开,也可单独设置):
- border-image-source: 图片的路径
- border-image-slice: 图片切片位置(那部分显示为边框)
- border-image-width: 图片边框的宽度
- border-image-outset: 边框图像区域超出边框的量
- border-image-repeat: 图像边框如何显示
- 可设置的属性(可以直接设置用空格隔开,也可单独设置):
- box-shadow: 给边框添加阴影
- width: 元素宽度
- height: 元素高度
- background: 背景样式
- 可设置的属性(可以直接设置用空格隔开,也可单独设置):
- background-color: 背景颜色(red/#000000)
- background-position: 背景图像的位置
- background-size: 规定背景图片的尺寸
- background-repeat: 规定如何重复背景图像
- background-attachment: 规定背景图像是否固定
- background-image: 规定要使用的背景图像
- 可设置的属性(可以直接设置用空格隔开,也可单独设置):
- opacity: 规定元素的透明程度
- cursor: 规定鼠标放上时鼠标的形状
- columns: 规定子元素分成几列以及列的宽度
变化
- transform: 对元素进行转换(旋转,缩放,移动,倾斜等)
- cursor: 定义光标形状
- transition-delay: 设定当状态改变(伪类选择器)时,几秒后属性变化
- transition-duration: 设定改变状态(伪类选择器)要经过几秒(当此值为0时, 没有过度效果)
- transition-timing-function: 设定状态改变(伪类选择器)的速率
- transition-property: 设定应用过渡效果的属性(当指定属性变化时,过渡效果开始)
- animation: 设定动画
文本
- text-indent: 设置文本块首行的缩进(段落效果)
- text-align: 规定水平对齐方式(靠左,居中等)
- text-decoration: 设置文本的装饰效果(下划线等)
- text-transform: 控制文本大小写
- text-shadow: 设置文字投影效果(阴影等)
- line-height: 行高(行高与块高相同实现文字上下居中)
- letter-spacing: 控制字符间距
- color: 字体颜色(red/#000000)
- font-style: 设置字体样式(斜体等)
- font-family: 设置字体(用逗号隔开,会依次查找能用的字体)
- font-weight: 设置字体粗细
- word-spacing: 设置单词间距
- letter-spacing: 设置字符间距
- white-space: 设置如何处理元素中的空白
列表
- list-style-type: 设置列表标记的类型(实心圆,空心圆等)
- list-style-image: 将图片作为列表的标记
- list-style-position: 设置标记的位置
表格
- border-collapse: 设置表格边框是否为单一边框
- border-spacing: 相邻表格边框的距离(必须设置 border-collapse:separate; 否则会忽略)
- empty-cells: 空单元格是否显示边框(必须设置 border-collapse:separate; 否则会忽略)
5、自定义规则
字体(供 font-family 属性使用):
@font-face /*自定义字体*/ { font-family: myFirstFont; /*自定义字体名*/ src: url('Sansation_Light.ttf'), /*字体路径*/ url('Sansation_Light.eot'); /* IE9 */ }
6、bootstrap
响应式布局,即布局会根据浏览器大小等进行调整
中文文档 'https://v3.bootcss.com/' 官网 'http://getbootstrap.com/'
包括:
- css样式(一些基本的css样式):
- 组件(图标,下拉菜单,导航等css样式):
- js插件: 配合 jQuery 使用
7、font-awesome
字体图标, 即显示的小图标
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:浅谈pc和移动端的响应式
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash