css再次学习

• id和class选择器

#para1
{
text-align:center;
color:red;
}
<p id="para1">Hello World!</p>

.center
{
text-align:center;
}
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
或者
h1.center{} p.center{}

• 背景

  • background-color背景颜色
    十六进制 - 如："#ff0000"RGB - 如："rgb(255,0,0)"颜色名称 - 如"red"
  • background-image背景图像
  • background-repeat背景图像 - 水平或垂直平铺
    repeat-x 只有水平位置会重复背景图像
    repeat-y 只有垂直位置会重复背景图像
    no-repeat background-image不会重复
  • background-attachment背景图像是否固定或者随着页面的其余部分滚动
    scroll 背景图片随页面的其余部分滚动这是默认 fixed 背景图像是固定的
  • background-position背景图像- 设置定位
    left center bottom right /x px,y px/x%,y%
    简写 background: #00ff00 url('smiley.gif') no-repeat fixed center;

• 文本

  • color 设置文本颜色
  • direction 设置文本方向。
    ltr 默认。文本方向从左到右。
    rtl 文本方向从右到左。
  • line-height 设置行高
    number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
    length 设置固定的行间距。
    % 基于当前字体尺寸的百分比行间距。
  • text-align 对齐元素中的文本
    left 把文本排列到左边。默认值：由浏览器决定。
    right 把文本排列到右边。
    center 把文本排列到中间。
    justify 实现两端对齐文本效果。
  • text-decoration 向文本添加修饰
    underline 定义文本下的一条线。
    overline 定义文本上的一条线。
    line-through 定义穿过文本下的一条线。
    blink 定义闪烁的文本。
  • text-indent 缩进元素中文本的首行
    length 定义固定的缩进。默认值：0。
    % 定义基于父元素宽度的百分比的缩进。
  • text-shadow 设置文本阴影 text-shadow: h-shadow v-shadow blur color;
    h-shadow 必需。水平阴影的位置。允许负值。
    v-shadow 必需。垂直阴影的位置。允许负值。
    blur 可选。模糊的距离。
  • text-transform 控制元素中的字母(大小写)
    capitalize 文本中的每个单词以大写字母开头。
    uppercase 定义仅有大写字母。
    lowercase 定义无大写字母，仅有小写字母。
  • vertical-align 设置元素的垂直对齐
    sub 垂直对齐文本的下标。
    super 垂直对齐文本的上标
    top 把元素的顶端与行中最高元素的顶端对齐
    text-top 把元素的顶端与父元素字体的顶端对齐
    middle 把此元素放置在父元素的中部。
    bottom 把元素的底端与行中最低的元素的顶端对齐。
    text-bottom 把元素的底端与父元素字体的底端对齐。
    length
    % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
  • word-spacing 设置字间距

• 字体

  • font 在一个声明中设置所有的字体属性
    font:15px arial,sans-serif;
    font-style font-variant font-weight font-size/line-height font-family"
  • font-family 指定文本的字体系列
  • font-size 指定文本的字体大小
  • font-style 指定文本的字体样式
  • font-variant 以小型大写字体或者正常字体显示文本。
  • font-weight 指定字体的粗细。
    bold 定义粗体字符。
    bolder 定义更粗的字符。
    lighter 定义更细的字符。

• 链接

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

  a:link {color:#000000;} /* 未访问链接/
  a:visited {color:#00FF00;} / 已访问链接 /
  a:hover {color:#FF00FF;} / 鼠标移动到链接上 /
  a:active {color:#0000FF;} / 鼠标点击时 */

• 列表

  • list-style用于把所有用于列表的属性设置于一个声明中
  • list-style-image 将图象设置为列表项标志。
  • list-style-position 设置列表中列表项标志的位置。
  • list-style-type 设置列表项标志的类型。none无标记

• 表格
  显示一个表的单个边框，使用 border-collapse属性。border-collapse:collapse;
  border设置边框

• 盒模型

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
  • 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

• 边框

  • 边框-简写属性 border:border-width border-style (required) border-color
  • border-style 值:
    none: 默认无边框
    dotted: 定义一个点线边框
    dashed: 定义一个虚线边框
    solid: 定义实线边框
    double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
    groove: 定义3D沟槽边框。效果取决于边框的颜色值
    ridge: 定义3D脊边框。效果取决于边框的颜色值
    inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
    outset: 定义一个3D突出边框。 效果取决于边框的颜色值
  • border-style属性可以有1-4个值：border-style:dotted solid double dashed;

• 轮廓

  • outline 在一个声明中设置所有的轮廓属性
  • outline:outline-color,outline-style,outline-width
  • outline-color 设置轮廓的颜色
  • outline-style 设置轮廓的样式
    none
    dotted
    dashed
    solid
    double
    groove
    ridge
    inset
    outset
  • outline-width 设置轮廓的宽度
    thin
    medium
    thick
    length

• 边距

  
  image.png
  • margin 简写属性。在一个声明中设置所有外边距属性。
    auto 设置浏览器边距。这样做的结果会依赖于浏览器
    length 定义一个固定的margin（使用像素，pt，em等）
    % 定义一个使用百分比的边距
  • margin-bottom 设置元素的下外边距。
  • margin-left 设置元素的左外边距。
  • margin-right 设置元素的右外边距。
  • margin-top 设置元素的上外边距。

• 填充

  • padding 使用简写属性设置在一个声明中的所有填充属性
  • padding-bottom 设置元素的底部填充
  • padding-left 设置元素的左部填充
  • padding-right 设置元素的右部填充
  • padding-top 设置元素的顶部填充

• 分组和嵌套

  • 分组选择器

    h1,h2,p
    {
    color:green;
    }

  • 嵌套选择器

    p{ }: 为所有 p 元素指定一个样式。
    .marked{ }: 为所有 class="marked" 的元素指定一个样式。
    .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
    p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

• 尺寸
  *height 设置元素的高度。

  • line-height 设置行高。
  • max-height 设置元素的最大高度。
  • max-width 设置元素的最大宽度。
  • min-height 设置元素的最小高度。
  • min-width 设置元素的最小宽度。
  • width 设置元素的宽度。

• 显示

  • 隐藏元素 - display:none或visibility:hidden
    isibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间
    display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间
  • 块和内联元素
    display:inline;
    display:block;
  • 块级元素主要有：
    div ，form , h1 ， hr , ol , p , pre , table , ul , li
  • 内联元素主要有:

• 定位

  • position脱离文档流
  • static 没有定位，遵循正常的文档流对象。
    静态定位的元素不会受到 top, bottom, left, right影响。
  • relative
    相对定位元素的定位是相对其正常位置。
  • fixed
    元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
  • absolute
    绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
  • sticky

• 浮动

  • clear 指定不允许元素周围有浮动元素。
    left
    right
    both
    none

  • float 指定一个盒子（元素）是否可以浮动。
    left
    right
    none

• overflow
  属性用于控制内容溢出元素框时显示的方式。
  visible 默认值。内容不会被修剪，会呈现在元素框之外。
  hidden 内容会被修剪，并且其余内容是不可见的。
  scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

• 对齐元素

  • 元素居中对齐：margin: auto;
  • 注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
  • 文本居中对齐：text-align: center;
  • 文本垂直居中：line-height:width的长度
  • 图片居中对齐： display: block; margin: 0 auto;
  • 左右对齐 - 使用定位方式position: absolute; right: 0px;
  • 左右对齐 - 使用 float 方式 float: right;
  • 垂直对中 - 不设置height 设置padding：num 0；
  • 垂直居中 - 使用 position 和 transform

    .center {
    height: 200px;
    position: relative;
    
    border: 3px solid green;
    }
    .center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    <div class="center">
    <p>我是水平和垂直居中的。</p>
    </div>

• 组合选择符

  <div>
  <p>段落 1 在 div 中。</p>
  <p>段落 2在 div 中。</p>
  <div>
  <p>段落 3在 div 中。</p>
  <p>段落 4在 div 中。</p>
  </div>
  </div>
  <p>段落 5在 div 中。</p>
  <p>段落 6在 div 中。</p>

  • 后代选择器(以空格分隔) 选取某元素的后代元素。

  div p{} 将对div下所有p元素起作用即1，2，3，4

  • 子元素选择器(以大于号分隔） 选择作为某元素子元素的元素

    div>p{} 将对div下子元素p元素起作用1，2
    * 相邻兄弟选择器（以加号分隔）选择紧接在另一元素后的元素，且二者有相同父元素
    >div+p{} 将对div下子元素p元素起作用5
    * 普通兄弟选择器（以破折号分隔）选取所有指定元素之后的相邻兄弟元素
    >div~p{} 将对div下子元素p元素起作用5,6

• 生成的内容

• 伪类

  • 语* 法：selector.class:pseudo-class {property:value;}
  • :first-child 伪类选择父元素的第一个子元素。
  • :checked input:checked 选择所有选中的表单元素
  • :disabled input:disabled 选择所有禁用的表单元素
  • :empty p:empty 选择所有没有子元素的p元素
  • :enabled input:enabled 选择所有启用的表单元素
  • :first-of-type p:first-of-type 选择每个父元素是p元素的第一个p子元素
  • :in-range input:in-range 选择元素指定范围内的值
  • :invalid input:invalid 选择所有无效的元素
  • :last-child p:last-child 选择所有p元素的最后一个子元素
  • :last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素
  • :not(selector) :not(p) 选择所有p以外的元素
  • :nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
  • :nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
  • :nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
  • :nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素
  • :only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素
  • :only-child p:only-child 选择所有仅有一个子元素的p元素
  • :optional input:optional 选择没有"required"的元素属性
  • :out-of-range input:out-of-range 选择指定范围以外的值的元素属性
  • :read-only input:read-only 选择只读属性的元素属性
  • :read-write input:read-write 选择没有只读属性的元素属性
  • :required input:required 选择有"required"属性指定的元素属性
  • :root root 选择文档的根元素
  • :target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
  • :valid input:valid 选择所有有效值的属性
  • :link a:link 选择所有未访问链接
  • :visited a:visited 选择所有访问过的链接
  • :active a:active 选择正在活动链接
  • :hover a:hover 把鼠标放在链接上的状态
  • :focus input:focus 选择元素输入后具有焦点
  • :first-letter p:first-letter 选择每个<p> 元素的第一个字母
  • :first-line p:first-line 选择每个<p> 元素的第一行
  • :first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素
  • :before p:before 在每个<p>元素之前插入内容
  • :after p:after 在每个<p>元素之后插入内容
  • :lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值

• 伪元素

• 导航栏

  ul li a:hover:not(.active){
  background: #ff9c01;
  color:#fff;
  } 除了active都能
  li a.active {
  color: white;
  background-color: #4CAF50;
  }首次激活
  <li><a class="active" href="#">主页</a></li>

  • 垂直导航栏
  • 激活/当前导航条实例
  • 创建链接并添加边框
  • 全屏高度的固定导航条

  ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* 全屏高度 /
  position: fixed;
  overflow: auto; / 如果导航栏选项多，允许滚动 */
  }

• 下拉菜单

  • .dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
  • .dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
  • 使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。
  • :hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
  • 下拉内容对齐方式左边对齐left:0; 右边对齐 right:0;
  • 图片放大：给图片设置不同的width和height;