美文网首页Java Web程序设计
CSS---选择器和常用属性

CSS---选择器和常用属性

作者: Wovw | 来源:发表于2020-12-07 17:52 被阅读0次

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一样式任务的部分被称为选择器。

1.标记选择器

用HTML标记名称作为选择器。

基本语法格式:标记名{属性1:属性值1;属性2:属性值2;}

2.类选择器

使用“.”进行标识,后面紧跟类名。(class)

基本语法格式:.类名{属性1:属性值1;属性2:属性值2;}

3.id选择器

使用“#”进行标识,后面紧跟id名。元素的id值唯一,只能对应于文档中某一个具体的元素。

基本语法格式:#id名{属性1:属性值1;属性2:属性值2;}

4.通配符选择器

使用“*”表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素。

基本语法格式:*{属性1:属性值1;属性2:属性值2;}

例:如下样式能够清除所有HTML标记的默认边距。

*{margin:0;   /*定义外边距*/

  padding:0;  /*定义内边距*/}

案例:

案例

图中,在<style>标记内分别定义了类选择器和id选择器。

“标题一...”和“段落二...”的文本内容均显示为红色,可见同一个类选择器可以被多个标记引用,而且一个HTML标记可以同时引用多个类选择器。

“段落2...”和“段落3...”的字号均为24像素,这是由于它们引用了相同的id选择器,虽然浏览器并没有报错,但是这种做法是不被允许的,因为在JavaScript等脚本语言中id值是唯一的。

“段落4...”没有显示任何CSS样式,这意味着同一个标记对象不能同时引用多个id选择器,例如“id="bold font24"”的引用方式是完全错误的。

---选择器优先级:id选择器 > class选择器 > 标记选择器 > 通配符选择器

CSS常用属性:

(1)margin:用于指定对象的外边距,也就是对象与对象之间的距离。该属性可指定1~4个属性值,各属性值以空格分隔。

(2)padding:用于指定对象的内边距,也就是对象的内容与对象边框之间的距离。该属性可指定1~4个属性值,各属性值以空格分隔。

(3)background:用于设置背景颜色、背景图片、背景图片的排列方式、是否固定背景图片和背景图片的位置。该属性可指定多个属性值,各属性值以空格分隔,没有先后顺序。

(4)font-family:规定元素的字体系列。

(5)border:用于设置边框的宽度、边框的样式和边框的颜色。该属性可指定多个属性值,各属性值以空格分隔,没有先后顺序。

(6)font:用于设置字体样式、小型的大写字体、字体粗细、文字的大小、行高和文字的字体。

(7)height:用于指定对象的高度。

(8)line-height:用于设置行间距,所谓行间距就是行与行之间的距离,即字符的垂直间距,一般称为行高。

(9)color:用于指定文本的颜色。

(10)text-align:用于指定文本的对齐方式。

(11)text-decoration:用于指定文本的显示样式,其属性值包括line-through(删除线)、overline(上划线)、underline(下划线)、blink(闪烁效果,Firefox和Opera可以看到效果)和none(无效果)等。

(12)vertical-align:用于设置元素的垂直对齐方式。

(13)display:用于指定对象的显示形式。

相关文章

  • CSS---选择器和常用属性

    要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一样式任务的部分被称为选择器。...

  • 常用选择器测试代码

    常用基本选择器 常用常用层次选择器 常用基本过滤选择器 常用基本内容过滤选择器以及可见性过滤选择器 常用的属性过滤...

  • jQuery的常用选择器

    JQuery一些常用选择器的属性和方法

  • JQ选择器

    基本选择器 层次选择器 基本过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 还有其他多种不常用属性过...

  • web前端入门到实战:css常用基本层级伪类属性选择器

    常见的css选择器包含:常用选择器、基本选择器、层级选择器、伪类选择器、属性选择器,其中常用选择器分为:1.htm...

  • HTML 学习笔记

    1 常用的属性 2 序号选择器

  • 2019-08-01jQuery基础

    语法 常用选择器 属性选择器 基本过滤器 书写要规范 样式设计 追加行内样式和移除 切换样式 常用 推荐on方法

  • Html、Css

    总结 常用标签 常用属性 选择器 盒子、浮动、定位等 常用图片格式

  • 2020-02-27 MATLAB App Designer——

    常用组件 常用组件信息坐标区UIAxes 属性按钮 Button 属性复选框CheckBox 属性日期选择器Dat...

  • CSS-常用选择器

    常用选择器 子代和父代选择器 伪类选择器 伪元素 属性选择器 孩子选择器 兄弟选择器 否定伪类 优先选择器 a的伪类

网友评论

    本文标题:CSS---选择器和常用属性

    本文链接:https://www.haomeiwen.com/subject/vyjcbktx.html