计算机基础知识43

属性选择器

# 通过标签的属性来查找标签，标签都有属性， id值和class值是每个标签都自带的属性，还     有另外一种：自定义属性

# 针对于username='kevin' password='123'属性就是div标签的自定义属性

伪类选择器(鼠标)

# 分组选择器使用逗号隔开，所有的选择器都是并列的

# 组合(嵌套)选择器使用的是空格隔开，选择器不是并列的，最终生效的还是最后一个选择器

未访问的链接：a:link {color: #FF0000}

鼠标移动到链接上：a:hover {color: #FF00FF} 

选定的链接：a:active {color: #0000FF}

已访问的链接：a:visited { color: #00FF00} 

input输入框获取焦点时样式：input:focus { outline: none; background-color: #eee;}

    
    
    


百度访问'

伪元素选择器(字体)

first-letter：常用的给首字母设置特殊样式

before：在每个元素之前插入内容

after：在每个元素之后插入内容

# before和after多用于清除浮动

    
    
    


窈窕淑女，君子好逑

选择器的优先级

比较选择器的优先级高低

1. 选择器相同的情况下：
        # 离谁越近，就听谁的，就近原则.
2. 选择器不同的情况下：
     行内选择器 >>>    id选择器  >>>   类选择器  >>>  标签选择器

CSS属性--宽和高

width属性可以为元素设置宽度。
height属性可以为元素设置高度。
# 块级标签才能设置宽度，内联标签的宽度由内容来决定。
# 默认情况下，只有块儿级元素才能设置长、宽，内联元素不能设置，设置了也不错，就是没有效果而已"

CSS属性--字体属性

font-family：文字字体

font-weight：用来设置字体的字重（粗细）：

                  normal--默认值，标准粗细
                  bold--粗体、bolder--更粗
                  lighter--更细
                  100~900--设置具体粗细，400等同于normal，而700等同于bold
                  inherit--继承父元素字体的粗细值

文本颜色：颜色属性被用来设置文字的颜色。
   ● 十六进制值 - 如: ＃FF0000
   ● 一个RGB值 - 如: RGB(255,0,0)
   ● 颜色的名称 - 如:  red
# 还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，0.0到1.0之间
text-align ：规定元素中文本的水平对齐方式。
           left--左边对齐 默认值、right--右对齐、center--居中对齐

text-decoration：文字装饰
                 none--默认，定义标准的文本。
                 underline--定义文本下的一条线。
                 overline--定义文本上的一条线。
                 line-through--定义穿过文本下的一条线

text-decoration: none:去掉a标签默认的自划线

text-indent: 32px: 将段落的第一行缩进 32像素

    
    
  


昼夜微云夜观星 醒也思君 寐也思君
糖果爱上我博客

CSS属性--背景属性

background-color: 背景颜色
background-image: url('1.jpg');:背景图片
背景重复: repeat(默认):背景图片平铺排满整个网页
                repeat-x：背景图片只在水平方向上平铺
                repeat-y：背景图片只在垂直方向上平铺
                no-repeat：背景图片不平铺
        background-repeat: no-repeat; 
background-position: left top;:背景位置
                  /*background-position: 200px 200px;*/

# 支持简写：background:#336699 url('1.png') no-repeat left top;

OCTYPE html>


    
    
  



    
昼夜微云夜观星 醒也思君 寐也思君
    糖果爱上我博客

CSS属性--边框属性和border-radius

border-width: 边框厚度

border-style: 边框样式

border-color: 边框颜色

# 简写：border: 2px solid red;

# 除了可以统一设置边框外还可以单独为某一个边框设置样式

      border-top-style:dotted;
      border-top-color: red;
      border-right-style:solid;
      border-bottom-style:dotted;
      border-left-style:none;

    
    
  



    
你就仗着我爱你所以天天欺负我是吧

border-radius：实现圆角边框的效果

CSS属性--display属性

# display:"none" :HTML文档中元素存在，但是在浏览器中不显示。

               一般用于配合JavaScript代码使用

display:block: 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下部分

display: block; /*让链接显示为块级标签*/

display:inline: 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:inline-block:使元素同时具有行内元素和块级元素的特点。

CSS盒子模型

# 以快递盒为例:
      1. 快递盒和快递盒之间的举例称为是外边距，用margin值表示
      2. 快递盒和里面物品之间的举例称为是内边距，用padding来表示
      3. 盒子的厚度我们称为是边框，用border来表示
      4. 物品的实际大小称为是content

margin外边距:  margin-top:5px;
                        margin-right:10px;
                        margin-bottom:15px;
                        margin-left:20px;

/*第一个代表上，第二个代表左右，第三个代表下*/
margin: 10px 20px 30px;

padding内填充:  padding-top: 5px;
                          padding-right: 10px;
                          padding-bottom: 15px;
                          padding-left: 20px;

float浮动

# 在 CSS 中，任何元素都可以浮动。

# 三种取值:   left--向左浮动

                     right--向右浮动

                     none--默认值，不浮动

# clear属性规定元素的哪一侧不允许其他浮动元素：

       left--在左侧不允许浮动元素、right、both、none、inherit--规定应该从父元素继承 

       # 注意：clear属性只会对自身起作用，而不会影响其他元素

# 浮动带来的影响：父标签塌陷问题

# 清除浮动：固定高度、伪元素清除法、overflow:hidden

# 伪元素清除法（使用较多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

# 完整清除浮动语法：

浮动案例--小米

    
    
  



  
Xiaomi手机
  
Redmi手机
  
电脑
  
电视
  
家电
  
平板
  
路由器
  
服务中心
  
社区

今日思维导图：