Làm cách nào để cài đặt Đặt lại CSS?

Có rất nhiều Đặt lại CSS khác nhau mà chúng tôi có thể sử dụng cho các trang web của mình. Bạn thậm chí có thể tạo của riêng bạn. Một trong hai cách đặt lại chúng tôi sẽ sử dụng trong lớp này là Đặt lại của Eric Meyer, được tạo bởi chuyên gia CSS Eric Meyer

Đây là mã trong Cài đặt lại của Meyer

Bao gồm cả Reset Stylesheet

Chúng tôi có thể bao gồm biểu định kiểu đặt lại bằng một số phương pháp khác nhau

Biểu định kiểu bên ngoài

Chúng ta có thể sử dụng biểu định kiểu đặt lại làm biểu định kiểu bên ngoài giống như chúng ta làm với các kiểu bình thường của mình. Chỉ cần đảm bảo thêm nó trước, vì thứ tự quan trọng

  

  HTML Page for Testing CSS

  
  

Hãy nhớ rằng biểu định kiểu Đặt lại CSS phải luôn đi đầu tiên

Sao chép và dán vào biểu định kiểu riêng của chúng tôi

Bạn cũng có thể chỉ cần sao chép tất cả các quy tắc từ biểu định kiểu đặt lại và dán chúng vào biểu định kiểu của riêng bạn. Đảm bảo rằng bạn đặt chúng ở trên cùng để chúng không ghi đè lên bất kỳ quy tắc nào của bạn

Nếu bạn sử dụng phương pháp này, hãy nhớ đánh dấu rõ ràng phần đặt lại của biểu định kiểu và cung cấp tín dụng cho tác giả bằng các nhận xét CSS. Mặc dù tác giả đã cung cấp biểu định kiểu này cho mọi người sử dụng, nhưng đây không phải là tác phẩm của bạn, vì vậy đừng giả vờ như vậy

Bạn cần có gói ember-cli-node-assets để có thể nhập tệp CSS vào ứng dụng của mình. Sau đó, bạn cần thêm tệp đặt lại vào tệp xây dựng ember-cli

$ npm install --save-dev ember-cli-node-assets

// ember-cli-build.js
module.exports = function(defaults) {
  const app = new EmberApp(defaults, {
    nodeAssets: {
      'simple-css-reset': {
        import: ['reset.css']
      }
    }
  });
};

gói web

Giả sử bạn đã cài đặt và định cấu hình trình tải CSS đúng cách, bạn chỉ cần yêu cầu tệp reset.css trong điểm nhập của ứng dụng

$ npm install --save-dev css-loader

// index.js
import 'simple-css-reset/reset.css';

Gatsby

Vì simple-css-reset có nghĩa là được sử dụng biểu định kiểu thiết lập lại toàn cầu, nên cách tốt nhất để sử dụng nó trong Gatsby là bao gồm trong

$ npm install --save-dev ember-cli-node-assets

0

// gatsby-browser.js
import 'simple-css-reset';

Giấy phép

simple-css-reset là © 2014-2019 Mirego và có thể được phân phối tự do theo giấy phép BSD mới. Xem tệp

$ npm install --save-dev ember-cli-node-assets

2

Logo thiết lập lại dựa trên biểu tượng đáng yêu này của Hali Gali Harun, từ The Noun Project. Được sử dụng theo Creative Commons BY 3. 0 giấy phép

Giới thiệu về Mirego

Mirego là một nhóm gồm những người đam mê tin rằng công việc là nơi bạn có thể đổi mới và vui chơi. Chúng tôi là một nhóm gồm những người tài năng, những người tưởng tượng và xây dựng các ứng dụng Web và di động đẹp mắt. Chúng ta đến với nhau để chia sẻ ý tưởng và thay đổi thế giới

Mỗi khi tôi tạo một thứ gì đó 'appy', tôi phải tắt hoặc đặt lại một loạt các kiểu tác nhân người dùng để tôi có thể sử dụng đúng thành phần cho công việc hiện tại nhưng tạo kiểu cho nó nội tuyến với dự án tôi đang xây dựng

Đặt lại ứng dụng dành riêng cho các ứng dụng web

Ghi chú trợ năng

Các phần tử HTML mục tiêu đặt lại này thường nhận các giá trị mặc định về kiểu dáng bởi Tác nhân người dùng mà tôi luôn cần phải 'hoàn tác'

Xin lưu ý rằng một số thiết lập lại này có tác động tiêu cực đến khả năng sử dụng và khả năng truy cập mặc định của trang web. Do đó, hãy đảm bảo bạn thêm lại kiểu có thể truy cập tương đương phù hợp với thẩm mỹ dự án của bạn

Bạn sẽ muốn chạy cái này thông qua Autoprefixer

Thông thường, bạn sẽ cần chạy cái này thông qua Autoprefixer (https. //github. com/postcss/autoprefixer) để sản xuất

Lấy nó qua NPM

Nếu bạn muốn cài đặt qua NPM, bạn có thể chạy npm install app-reset và nó sẽ có sẵn trong thư mục node_modules của bạn. Thông tin NPM tại đây. https. //www. npmjs. com/gói/đặt lại ứng dụng

Gợi ý? . //twitter. com/benfrain hoặc https. // benfrain. com

Quá nhiều nhà thiết kế CSS mới làm quen không nhận ra tầm quan trọng của việc tạo "thiết lập lại. tập tin css". Khi bạn có một môi trường trong đó mỗi trình duyệt có kiểu dáng "mặc định" riêng, bạn sẽ thường thấy mình đập hộp sọ khi tự hỏi: "Tại sao lại có khoảng cách ở đây?" . Vấn đề với việc sử dụng một trong nhiều khung hiện có là chúng không được thiết kế riêng cho bạn. Ví dụ: tôi không bao giờ sử dụng phần tử "trung tâm" không dùng nữa trong các dự án của mình. Do đó, tôi không cần đặt nó vào kiểu dáng mặc định của mình. Tuy nhiên, những người khác có thể cần phải làm như vậy - mặc dù họ đáng bị tát vào cổ tay. hoặc mông nếu bạn quá nghiêng

Bước 1. Zero Out Margins và Padding của bạn

Theo mặc định, các trình duyệt sẽ thêm lề cho nhiều phần tử. Ví dụ: thường có khoảng sáu pixel lề trên phần tử nội dung. Là nhà thiết kế, bạn nên là người chỉ định những số liệu này. (Có thể ngoại trừ khi nói đến kích thước phông chữ - đó là một chủ đề hoàn toàn khác sẽ được tranh luận dài dòng. ) Vì vậy, hãy loại bỏ một loạt các yếu tố này

1

2

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,

3

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

4

{

5

margin: 0; padding: 0; border: 0; outline: none;

6

2

0

Bước 2. Kiểm soát các yếu tố của bạn

Bạn có thể nhận thấy rằng các phần tử của bạn có kích thước khác nhau tùy theo trình duyệt. Bạn có thể thay đổi điều này bằng cách đặt cỡ chữ mặc định thành 100%

1

2

2

3_______11__________

{

4

2

7

5

2

0

Tiếp theo, chúng ta sẽ cần xác định lề và phần đệm cho các phần tử tiêu đề của mình. Tôi cũng sẽ xóa list-style-type khỏi các phần tử danh sách của mình. Cuối cùng, tôi sẽ đặt cỡ chữ cơ sở cho phần tử nội dung

1

2

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,

2

3

{

4

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,

6

5

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,

8

6

2

0

3

1

3

2

2

3

3

4

{

3

6

2

7

3

8

3

9

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

0

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

1

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

2

2

0

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

4

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

5

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

6

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

7

{

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

9

4

0

4

1

2

0

4

3

4

4

4

5

4

6

{

4

8

4

9

{

0

2

0

Bước 3. Mở rộng

Tôi thường muốn đưa vào một số lớp phổ biến mà tôi sử dụng trong tất cả các dự án của mình. Bạn có thể hoặc không thể chọn sử dụng chúng cho mình

1

2

{

4

3

___

{

4

{

8_______15_______15_______0

6

9_______0_______11_______1

3

2

5

5

3

4

{

3

6

5

9

3

8_______16_______1_______12_______0_______0_______0

Đây là thiết lập lại đơn giản cuối cùng của chúng tôi. tệp css

1

2

margin: 0; padding: 0; border: 0; outline: none;

6

3

margin: 0; padding: 0; border: 0; outline: none;

8

4

{

5

margin: 0; padding: 0; border: 0; outline: none;

6

2

0

3

1

3

2

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,

2

3

4

{

3

6

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,

6

3

8

2

03

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

0

2

0

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

2

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

4

2

3

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

5

{

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

7

2

7

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

9

3

9

4

1

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

1

4

3

2

0

4

4

4

6

ol, li, dl, dt, dd, form, a, fieldset, input, th, td

6

4

8

{

{

0

4

0

2

26

2

0

2

28

2

29

2

30

2

31

{

2

33

2

34

2

35

2

36

2

37

2

0

2

39________9____

Ít nhất đối với tôi, đây là tất cả những gì tôi cần để bắt đầu với một trang web mới. Đối với các dự án của riêng bạn, bạn nên mở rộng dựa trên những gì tôi có ở đây để nó phù hợp nhất với bạn. Có lẽ bạn nên chỉ định lề trên nhiều thành phần thường được sử dụng của mình hơn, chẳng hạn như thẻ đoạn văn

Nếu bạn muốn có một tệp đặt lại 100%, tôi khuyên bạn nên tham khảo tệp "Đặt lại CSS" nổi tiếng của Eric Meyer. Ngoài ra, bạn có thể xem YUI Reset CSS. Hẹn gặp lại bạn vào ngày thứ hai

Làm cách nào để nhập Đặt lại CSS?

CSS Reset có còn cần thiết không?

Tệp Đặt lại CSS là gì?

CSS Reset hoạt động như thế nào?