黑马程序员技术交流社区

标题: 学习经历 [打印本页]

作者: 尚舒宁 时间: 2019-11-29 14:48
标题: 学习经历
ss常用选择器用下面这几种

派生选择器
id选择器
class类选择器
属性选择器
元素选择器
1、派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

<style>
div p{
color: red;
font-size: 20px;
}
</style>

<div>
<p>这是一个派生选择器的样例</p>
</div>
2、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 “#” 来定义。

#idtest{
color: blue;
font-size: 30px;
}

<div id="idtest">
<span>这是一个id选择器的样例</span>
</div>
id 选择器和派生选择器，在现代布局中，id 选择器常常用于建立派生选择器。

#idtest span{
color: blue;
font-size: 30px;
}
<div id="idtest">
<span>这是一个id选择器的样例</span>
</div>
3、class类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

.classtest{
color: blue;
font-size: 30px;
}
<div class="classiest">
<span>这是一个id选择器的样例</span>
</div>
4、属性选择器

对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。如下所示：

[title]
{
color:red;
}

<p title="liml">Hi!liml</p>
<p title="hello">Hi!hello</p>
[title=liml]
{
color:red;
}

<p title="liml">Hi!liml</p>
<p title="hello">Hi!hello</p>
5、元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

html {color:black;}
p {color:gray;}
h2 {color:silver;}
创建css

创建样式的方式有三种，第一是使用外部链接，第二种是使用内部的<style>标签，最后一种就是在标签的style属性中添加css样式。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

<style>
p{ color:red}
</style>

<p style:"color:red">
CSS样式

1、文本样式：

# 字体
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-style 设置字体风格。
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
font-weight 设置字体的粗细。
color 字体颜色

a:link - 普通的、未被访问的链接
#实例：
a:link {background-color:#B2FF99;}

a:visited - 用户已访问的链接
# 实例
a:visited {background-color:#FFFF85;}

a:hover - 鼠标指针位于链接的上方
# 实例
a:hover {background-color:#FF704D;}

a:active - 链接被点击的时刻
# 实例
a:active {background-color:#FF704D;}

#行间距
p{line-height: 200%}

2、表格样式

border-collapse 设置是否把表格边框合并为单一的边框。
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。

table-layout 设置显示单元、行和列的算法。
automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。
3、CSS框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

padding: 10px;
margin: 10px;
border: 1px solid red;

padding-bottom:1px;
padding-top:1px;
padding-left:1px;
padding-right:1px;
4、CSS定位

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。
首先从position来开始看，这里很重要；

absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative
生成相对定位的元素，相对于其正常位置进行定位。

因此，”left:20″ 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
overflow常用值

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit
规定应该从父元素继承 overflow 属性的值。

前面我们层级说过块级和内联元素，块级会直接占满该行，而内联元素的会在当前行内继续填充内容。当然如果我们想让一个内联元素能够转换为块级，或者块级转换为内联，此时我们就可以使用display属性来完成了，下面的是display常用的元素

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
li{
display:inline;
width:50px;
}
li{
display:block;
width:50px;
}

<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2