您的位置：首页 > Web前端 > CSS

【HTML学习笔记】CSS样式

2019-03-27 19:31 239 查看

多层样式重叠时，按“就近原则”覆盖：行内样式>内嵌样式>链接样式>浏览器默认样式。

p{ /*选择器*/
font-size:12px; /*字号*/
color:blue; /*颜色*/
font-weight:bold; /*加粗*/
}
  1. 添加方法一：行内样式，
    style
    作为
    <p></p>
    的属性添加，只对当前标签起作用。
<p style = "color:red"> /*行内样式*/
  1. 添加方法二：内嵌样式，嵌入到
    <head></head>
    标签中，针对多个标签起作用。
<style type="text/css">
p{
color: red;
} /*内嵌样式，只对当前页面的所有p标签有用*/
</style>
  1. 添加方法三：外部单独文件，命名为 style.css，选择大括号形式设置属性。
<link rel="stylesheet" href="css/style.css"/> /*html文件引用*/
<!--html文件内代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Lorem ipsum.</p>
</body>
</html>
<!--style.css文件内代码-->
p{
color: red;
font-size: 12px;
}

  1. 标签选择器：定义在某种标签上使用。

  2. 类别（class）选择器：可作用于多个网页元素，

  3. ID选择器：用#号开头定义，有唯一性，只能唯一被引用一次，

在这里插入代码片

  1. 嵌套声明：

    <p></p>
    标签嵌套
    <span></span>
    标签，写作
    p span{ }
    。

  2. 集体声明：作用于

    <h1></h1>
    和
    <p></p>
    标签上，写作
    h1,p{ }
    。

  3. 全局声明：

    *{ }
    ，针对所有网页元素。

单位 描述 
px
 像素 
em
 字符，自适应用户字体 
%
 百分比
颜色 描述 
rgb(red,green,blue)
 每个分量取0-255 
rgb(red%,green%,blue%)
 百分比值0%-100% 
rgba(red,green,blue,a)
 a值为设置不透明度，0.0-1.0 
#rrggbb
 十六进制数表示
属性 描述 取值 
color
 文本颜色 
red #f00 rgb(255,0,0)
 
letter-spacing
 字符间距 
2px -3px
（字符相互重叠）		 
line-height
 行高 
14px 1.5em 120%
 
text-align
 对齐 
center left right justify
（两端对齐）		 
text-decoration
 装饰线 
none overline underline line-through
 
text-indent
 首行缩进 
2em
 
text-shadow
 阴影 水平偏移-垂直偏移-模糊度-颜色
字体 描述 取值 
font
 在一个声明中设置所有字体的属性 
font：bold 18px ’幼圆‘
 
font-family
 字体系列，若没有第一种字体，则使用第二种，没有第二种则使用第三种 
font-family:"Hiragino Sans GB","Microsoft YaHei",san-serif;
 
font-size
 字号 
14px 120%
 
font-style
 斜体 
italic(斜体更强) oblique
 
font-weight
 粗体 
bold
背景 描述 
background-color
 颜色 
background-image
 
url（”logo.jpg“)
图片会覆盖掉背景颜色		 
background-repeat
 图片填充方式，默认为棋盘格填充（
repeat
）；横向填充（
repeat-x
）；纵向填充（
repeat-y
）；只显示一次（
no-repeat
）		 
background: 颜色 图片 repeat
超链接 描述 
a:link
 普通的、未被访问的超链接 
a:visited
 用户已访问 
a:hover
 鼠标指针悬浮在上面的 
a:active
 被鼠标点击的

伪类选择器用“：”标记。

定义四种超链接样式的优先级为：Love & Hate

a:link{
text-decoration : none; /*无下划线装饰*/
color : #09f; /*浅蓝色*/
} /*未访问*/
a:visited{
color : #f00; /*红色*/
} /*已访问*/
a:hover{
text-decoration : underline;
color :#03c; /*深蓝色*/
} /*鼠标悬停*/
a:active{
text-decoration : none; /*无下划线装饰*/
color : #03c;
} /*活跃*/

设置悬停文本变大：

a{
font-size:22px;
}
a:hover{
font-size : 120%;
}

列表/表格

好的这个没保存不见了
列表：

list-style&&list-style-image&&list-style-type&&list-style-position

表格：
width&&height&&border&&border-collapse

CSS 动画

<style type="text/css">
p {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
p:hover {
animation-duration: 1s;
animation-delay: 200ms;
animation-name: kaopu;
animation-iteration-count: infinite;/* 动画无限循环 */
animation-direction: nomal;/* 动画变大以后再变小 */
}
@keyframes kaopu {
to{
width: 200px;
height: 200px;
background-color: orange;

}
}
</style>

CSS的布局和定位

盒子模型

属性 描述 取值
overflow 超出内容显示方法 
hidden scroll auto
border-width 
px thin medium thick
border-style 
dashed dotted solid double
 

border:width style color

.line{
height:1px;
width:500px;
border-top:1 px solid #e5e5e5;
}
margin:top right bottom left

bottom缺省和top相等，left与right相等，margin属性垂直外边距自动合并，水平居中auto。

CSS的定位机制

  1. 文档流
    flow

    为默认的定位效果，上下排列。
    元素分类：
    block
    、
    inline
    、
    inline-block
    ，不同类像元素可通过
    display
    相互转换。
  • block
    元素独占一行，可以设置
    height、width、margin、padding
    属性。常见的
    block
    元素有：
    <div> <p> <h1>~<h6> <ol> <ul> <table> <form>
    。
a{
display:block;
}<!--将超链接显示为block类型-->
  • inline
    元素不单独占用一行，宽度够用则所有
    inline
    都在一行显示，不可以设置
    width、height
    。常见的
    inline
    元素有
    <span> <a>
    。
    inline
    元素有间隙问题，一般将其转为
    block类型，如嵌套在<p>
    标签内或
    <ul><li>
    标签内。
  • inline-block
    类型元素，不单独占用一行，元素的各个标签都可以设置。常见的为
    <img>
    标签。
    导航条示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mysite</title>
<style>
*{
padding: 0;
margin: 0;
}
#nav{
width: 300px;
margin: 100px auto;/*0表示上下边距*/
font-size: 0;/*可解决inline元素默认间距问题*/
}
a{
display: inline-block;
width: 80px;
height: 30px;
font-size: 14px;
text-align: center;
line-height: 30px;/*与height值相同则可以达到垂直居中效果*/
text-decoration: none;
border-bottom: 1px solid #ccc;
}
a:hover{
color: white;
background-color: #ccc;
border: 1px solid;
border-left-color: orange;
border-right-color: orange;
border-top-color: orange;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</body>
</html>
  1. 浮动定位
    float

    默认情况下，两个div盒子是垂直排列的；要把区域拆分成若干列时通常采用浮动定位。
  • float
    属性可以设置浮动
  • clear
    属性可以清除浮动，单向清除浮动，则被清除侧不会有元素显示了
  • position
    属性
  1. 层定位
    layer

    让网页元素像图层一样叠在一起
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航