记录前端学习第二次
时间：2019/5/20
背景边框列表链接和更复杂的选择器；掌握 CSS 稍微复杂的一些选择器，还有背景，边框等一些 CSS 样式属性
关于背景
- background 背景 一般是给块元素加背景,其值是颜色,通常是background-color缩写为background-color;如
<div style="width:200px; height:200px; background-color:red"></div>
<div style="width:200px; height:200px; backgroundr:red"></div>这两代码显示效果完全一样 ,background-color设定背景一个纯色 - background-image 背景图像 属性指定了在元素背景中显示的背景图像,该属性值为url(),小括号内是图片的路径
如:background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png),在默认情况下，图像在水平和垂直方向上都是重复的直到布满元素的整个区域,可以用background-repeat属性控制重复方向 - background-repeat 指定背景图像是如何重复
a.no-repeat: 图像将不会重复:它只会显示一次。
b.repeat-x: 图像将在整个背景中水平地重复。
c.repeat-y: 图像会在背景下垂直地重复
d.repeat: 图像将在整个背景中水平和竖直地重复
属性和属性值表现形式如:background-repeat: no-repeat; - background-position 背景中任意位置放置背景图像该属性将使用两个通过空格分隔的值，该空间指定了图像的水平(x)和垂直(y)坐标
关于边框 border: 2px solid red;给边框四边设置宽度,样式,颜色,等同于border-width:2px; border-style:solid; border-color:redborder-top, border-right, border-bottom, border-left: 想要设置边界一侧的宽度，样式和颜色时就单独选一边,如:border-top-width:2px; border-top-style:solid; border-top-color:red
关于列表- 无序列表 由<ul>定义,内嵌<li>连接内容
- 有序列表由<ol>定义,内嵌<li>连接内容
- <dl>如同<ul>表示开始,<dt>表示项目名称,<dd>表示项目内容
list-style: square url(example.png) inside;等同于list-style-type: square; list-style-image: url(example.png); list-style-position: inside;,
在网页制作中,经常用到无序列表制作导航栏,这时列表自身格式(自动缩进并带有实心圆)一般不要,就用到list-style-type:none消除格式
关于链接
链接的四种状态:- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
- 可用color, font-family, background设置四种状态的字体颜色,字体型号,背景色;用
text-decoration:none;消除链接默认的下划线
关于选择器的问题 - 选择器的分组与继承.如:
h1,h2,h3,h4,h5,h6 { color: green; }在<body>中h1到h6的内容字体颜色都是green;继承就是子级若没有写样式那他就遵循父级的样式 - 派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁
如li strong { font-style: italic; font-weight: normal; }该样式只对<body>内<li>元素内嵌的<strong>标签内的内容有效果
伪类选择器
链接的四种状态就运用到了伪类,一个冒号是伪类,两个冒号是伪元素
选择器的优先级 - !important最高,在一个样式属性值结束冒号之前加,但他只能对一个样式生效;
- 后>前,内联>内部>外部 id>class
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
