CSS——（CSS样式规则，CSS样式表单，选择器，常用的CSS属性）

最新推荐文章于 2023-03-03 23:20:44 发布

Decorator2015

最新推荐文章于 2023-03-03 23:20:44 发布

阅读量4.5k

点赞数 3

分类专栏： HTML/JavaScript/CSS 文章标签： css

本文链接：https://blog.csdn.net/Decorator2015/article/details/51397135

版权

HTML/JavaScript/CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS（Cascading Style Sheets，层叠样式表单）是由W3C所提出，主要的用途是控制网页的外观，也就是定义网页的编排，显示，格式化及特殊效果，有部分功能与HTML重叠。

1.CSS样式规则与选择器

CSS样式表单是由一条一条的样式规则（style rule）所组成，而样式规则包含选择器（selector）与声明（declaration）两个部分：

选择器{属性：值[；属性：值[; …]]}

1.1选择器（selector）：
选择器是用来指定样式规则所要套用的对象，也就是HTML元素。

1.2声明（declaration）：
声明是用来指定HTML元素的样式，以大括号括起来，里面包含属性（property）与值（value）,中间以冒号（：）连接，同时样式规则的声明个数可以不只一个，中间以分号（；）隔开。

1.3CSS注意事项：

1，空白，换行，属性值的前后必须加上双引号或者单引号。
2，CSS会区分英文字母的大小写。
3，CSS的注释符号是/**/。
4，样式规则可以合并。

h1,h2,h3,p{color:blue}

2.链接HTML文件与CSS样式表单

2.1在<head>元素里面嵌入样式表单

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>新网页1</title>
    <style>
      body {color:white; background:purple}
    </style>
  </head>
  <body>
    <h1>欢迎光临！</h1>
  </body>
</html>

2.2使用HTML元素的style属性指定样式表单

<!doctype html> 
<html>
  <head>
    <meta charset="utf-8">
    <title>新网页1</title> 
  </head> 
  <body style="color:white; background:purple">
    <h1>欢迎光临！</h1>
  </body>
</html>

2.3将外部的样式表单导入HTML文件

<!doctype html> 
<html>
  <head>
    <meta charset="utf-8">
    <title>新网页1</title>
    <style>
      @import url("body.css");
    </style>    
  </head>
  <body>
    <h1>欢迎光临！</h1>
  </body>
</html>

//body.css
body {color:white; background:purple}

2.4将外部的样式表单链接至HTML文件

<!doctype html> 
<html>
  <head>
    <meta charset="utf-8">
    <title>新网页1</title>
    <link rel="stylesheet" href="body.css" type="text/css"> 
  </head>
  <body>
    <h1>欢迎光临！</h1>
  </body>
</html>

3.选择器的类型

3.1类型选择器

针对HTML中的元素

h1{
   font-family："标楷体"；
   font-size：30px；
   color：blue；
}

3.2后裔选择器
针对HTML元素的子元素

//<h1>元素的<i>元素
h1  i{color:blue}

3.3万用选择器
针对所有元素

*{padding:0;margin:0}

3.4类选择器
针对隶属于某个指定类的HTML元素，即class

.heading{
        font-family："华康黑粗体";
        font-size:30px;
        color:maroon
}

//指定类，同时限制HTML元素的类型
p.heading{
        font-family："华康黑粗体";
        font-size:30px;
        color:maroon
}

//利用<div>和<span>元素套用样式规则
<!doctype html> 
<html>
  <head>
    <meta charset="utf-8">
    <title>蝶恋花</title>
    <style>
      .content {font-family:标楷体; font-size:25px; color:olive}
      .note {color:red}      
    </style>
  </head>
  <body> 
    <div class="content">
      <p>庭院深深深几许？杨柳堆烟，帘幕无重数。
         玉勒雕鞍游冶处，楼高不见章台路。雨横风狂三月暮，门掩黄昏，
         无计留春住。泪眼问花花不语，乱红飞过秋千去。</p>
      注释1：<span class="note"> “章台路” </span>意指歌妓聚居之所。<br>
      注释2：<span class="note"> “冶游生春露” </span>意指春游。
    </div>
  </body>
</html>

3.5ID选择器
针对符合指定ID的HTML元素

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>新网页1</title>
    <style>
      #button1 {font-size:30px; color:red}
      #button2 {font-size:30px; color:green}      
    </style>
  </head>
  <body> 
    <h1>意见调查单</h1>
    <form>
      <input type="submit" value="提交" id="button1">
      <input type="reset" value="重新输入" id="button2">
    </form>
  </body>
</html>

3.6属性选择器
针对有指定某个属性的元素

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>新网页1</title>
    <style>
      [class*="apple"] {color:blue}
    </style>
  </head> 
  <body> 
    <ul>
      <li class="apple">苹果牛奶</li>
      <li class="apple-banana">香蕉苹果牛奶</li>
      <li class="grape apple banana">特调牛奶</li>
      <li class="kiwifruit apple">特调果汁</li>
    </ul>
  </body>
</html>

3.7伪类选择器

<!doctype html> 
<html>
  <head>
    <meta charset="utf-8">
    <title>伪类</title>
    <style>
      a:link {color:black} /*套用到尚未浏览的超链接*/
      a:visited {color:green}/*套用到已经浏览的超链接*/
      a:hover {color:blue}/*套用到鼠标指针所指到但尚未点选的元素*/
      a:focus {color:red}/*套用到获取焦点的元素*/
      a:active {color:yellow}/*套用到所点选的元素*/    
    </style>
  </head>
  <body> 
    <ul>
      <li><a href="novel1.html">射雕英雄传</a></li>
      <li><a href="novel2.html">神雕侠侣</a></li>
      <li><a href="novel3.html">倚天屠龙记</a></li>
      <li><a href="novel4.html">碧血剑</a></li>
    </ul> 
  </body>
</html>

4.常用的CSS属性

字体属性；文本属性；颜色属性；背景属性；框线属性；
4.1字体属性

body{
    font-family：华康细圆体，微软正黑体；
    font-size：30px；
    font-style：oblique；//粗体
    font-variant：small-caps；//小号英文字母
    font-weight：400；//字体的粗细，400相当于normal
    font-height：2；//两倍行高font-height：30px
    font：normal small-caps 120%/120% "新细明体";
}

4.2文本属性

p{
  text-indent：20px;//首行缩进20像素
  text-align:center;//文本居中
  text-decoration：underline;//下划线，overline：顶线，line-through：删除线
  letter-spacing：3px;//字母间距
  word-spacing：3px;//文字间距，单词与单词之间
  text-transform：normal;//默认不转换
}

4.3颜色属性

h1{
   color:red;
   color:rgb(100%,0%,0%);
   color:rgb(256,0,0);
   color:#ff0000;
   color:rgba(255,0,0,0.5);//0.5为透明度
}

4.4背景属性

body{
    background-color:red;
    background-image:url(a.jpg);
    background-repeat:Repeat;//图片不够大时，重复填充
    background-attachment:scroll;//或者ixed，图片是否跟随网页内容移动
    background-position：right bottom;//水平方向为靠右，垂直方向为靠下。

}

4.5框线属性

#image{
      border-style:solid;//实线框线
      border-color:red;//边框线的颜色
      border-width:thin;//边框线的粗细

}
<img src="flower.jpg" id="image">

p{
  border:thick solid blue;
}

Decorator2015

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
CSS——（CSS样式规则，CSS样式表单，选择器，常用的CSS属性）

CSS（Cascading Style Sheets，层叠样式表单）是由W3C所提出，主要的用途是控制网页的外观，也就是定义网页的编排，显示，格式化及特殊效果，有部分功能与HTML重叠。1.CSS样式规则与选择器CSS样式表单是由一条一条的样式规则（style rule）所组成，而样式规则包含选择器（selector）与声明（declaration）两个部分：选择器{属性：值[；属性：值[; …]]
复制链接

扫一扫