CSS-选择器与属性

CSS

层叠样式表

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制整个站点（多）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CssTest</title>
    <link rel="stylesheet" href="style_demo.css">
    <style>
      h2 {
        color: red;
      }
      p {
        color: blue;
        font-size: 64px;
      }
    </style>
  </head>
  <body>
    <h1 style="color: yellow;">内联样式</h1>
    <h2>内部样式表</h2>
    <h3>外部样式表</h3>
    <br><br>
    <p>内部样式表</p>
    <p style="color: red;">内联样式</p>
  </body>
</html>

CSS导入方式优先级: 内联样式>内部样式表>外部样式表

选择器

元素选择器
类选择器

.highlight {
  background-color: yellow;
}

<h1 class="highlight">highlight类一级标题</h1>
<h1>一级标题</h1>

ID选择器

#header1 {
  background-color: yellow;
}

<h1 id="header1">header1一级标题</h1>
<h1>一级标题</h1>

通用选择器

* {
font-family: 'KaiTi';
}

子元素选择器和后代选择器

div > .son {
  color: red;
}
div p {
  color: yellow;
}

<div>
  <h1>子元素选择器示例</h1>
  <p class="son">子元素</p>
  <div>
    <h2>后代选择器示例</h2>
    <p class="grandson">后代元素</p>
  </div>
</div>

交集选择器与并集选择器

h1.important {color: red;
}
h2, p {color: green;}

<h1 class="important">交集选择器</h1>
<h2>并集选择器</h2>
<p>并集选择器</p>

相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素

h1 + p {color: red;}

<p>文本</p>
<h1>标题</h1>
<p>文本</p>

伪类选择器
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标移动到目标上
- a:active 激活（点击）的目标

a:link {color: lightcoral;}
a:visited {color: lightgray;}
a:hover {color: skyblue;}
a:active {color: lightpink;}

<a href="http://www.baidu.com">baidu</a>
<a href="http://www.x-zd.com">x-zd</a>

选择器优先级: ID>类>元素

常用属性

文本字体

font-size
font-family
font-weight, 粗细
font-style, 倾斜

选择器 { font: font-style font-weight font-size/line-height font-family;}

文本外观

color
text-align
line-height, 行间距
text-decoration, 用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。取消下划线（最常用）
underline	定义文本下的一条线。（常用）
overline	定义文本上的一条线。
line-through	定义穿过文本的一条线。

背景

background-color, 如果要设置背景, 元素必须有宽高
background-image : none | url(url)
background-repeat

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

background-position

参数	值
length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| center \| right 方位名词

background: 背景颜色背景图片地址背景平铺背景位置;

background-size

盒子模型

盒子分类

每个元素都有默认的显示方式, 包括

块盒: 独占一行, 可以设置宽高
行盒: 不独占一行, 不能设置宽高(不生效), 高度由内容决定
行内块(img)可以设置宽高, 又跟其它元素在同一行显示

显示方式是由display属性控制的

display常见的值:

block: 块盒
inline: 行盒
inline-block: 行内块

盒子模型div

结构: 内容, 内边距, 边框, 外边距

边框border

border : border-width || border-style || border-color

border-style包括:

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

border-radius: 圆角边框, 当半径为height的一半时, 就是表现为一个半圆形

内边距padding

div {
  /* 上:10px 右:20px 下:10px 左:20px */
  padding: 10px 20px 10px 20px;
  /* 顺时针 */
  /* 两个数表示上下和左右 */
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>新浪</title>
    <style>
      /* 重置样式(清空浏览器自带的样式) */
      * {
        margin: 0;
        padding: 0;
      }
      .nav {
        height: 40px;
        min-width: 630px;
        background-color: #fcfcfc;
        border-top: 3px solid #f08e2b;
        border-bottom: 1px solid #edeef0;
      }
      .nav a {
        /* 将a元素转换成 行内块 才可以设置宽高 */
        display: inline-block;
        height: 40px;
        padding: 0 20px;
        color: #4c4c4c;
        text-decoration: none;
        line-height: 40px;
        font-size: 12px;
      }
      .nav a:hover {
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <a href="#">设为首页</a>
      <a href="#">手机新浪网</a>
      <a href="#">移动客户端</a>
      <a href="#">博客</a>
      <a href="#">微博</a>
      <a href="#">关注我</a>
    </div>
  </body>
</html>

外边距margin
设置两个盒子之间的距离, 可以用来确定盒子之间的相对位置关系
margin-top/right/bottom/left

/* 水平居中必须设定宽度 */
div {
	width: 1080px;
	height: 40px;
	margin: 0 auto;
}

相邻的margin会合并

兄弟元素相邻, margin取最大值
父子元素相邻, 父元素margin取最大值

边框盒与内容盒

box-sizing:

border-box: 边框盒, 表示宽高为边框盒的大小
content-box(默认): 内容盒, 表示宽高为内容盒的大小

盒阴影

box-shadow: offset-x || offset-y || blur-radius || spread-radius

posted @ 2024-10-21 21:42 Khru 阅读(8) 评论(0) 编辑收藏举报

刷新页面返回顶部

khrushchefox